Ten przewodnik wyjaśnia, jak dodawać czcionki do stron internetowych za pomocą interfejsu Google Fonts API stron. Nie musisz programować. wystarczy dodać specjalne do dokumentu HTML, a następnie odwołaj się do czcionki w stylu CSS.
Krótki przykład
Oto przykład. Skopiuj ten kod HTML i wklej go do pliku:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Następnie otwórz plik w nowoczesnej przeglądarce. Powinna wyświetlić się strona następujący tekst, zapisana czcionką Tangerine:
To zdanie jest zwykłym tekstem, więc możesz zmienić jego wygląd za pomocą CSS. Wypróbuj dodając cień do stylu z poprzedniego przykładu:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Pod tekstem powinien pojawić się cień:
To dopiero początek możliwości, jakie daje interfejs Fonts API i CSS.
Omówienie
Aby zacząć korzystać z interfejsu Google Fonts API, wystarczą dwa kroki:
Dodaj link do arkusza stylów, aby zażądać żądanych czcionek internetowych:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Określ styl elementu za pomocą żądanej czcionki internetowej w arkuszu stylów:
.css-selector { font-family: 'Font Name', serif; }
lub używając stylu wbudowanego w sam element:
<div style="font-family: 'Font Name', serif;">Your text</div>
Listę czcionek, których możesz użyć, znajdziesz na stronie Google Fonts.
Określanie rodzin i stylów czcionek w adresie URL arkusza stylów
Aby określić adres URL, którego chcesz użyć w linku w arkuszu stylów, zacznij od polecenia Google Podstawowy adres URL interfejsu Fonts API:
https://fonts.googleapis.com/css
Następnie dodaj parametr adresu URL family= z co najmniej jedną nazwą rodziny czcionek i
stylów.
Aby na przykład poprosić o parametr Czcionka Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
Aby poprosić o kilka rodzin czcionek, rozdziel nazwy pionową kreską
(|).
Na przykład, aby zażądać czcionek Pomarańczowy, Inconsolata oraz Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Żądanie wielu czcionek umożliwia korzystanie ze wszystkich tych czcionek na stronie. (Nie przesadzaj – większość stron nie potrzebuje bardzo wielu czcionek i nie zawsze wiele czcionek może spowolnić wczytywanie strony).
Interfejs Google Fonts API udostępnia standardową wersję żądanych czcionek przez
wartość domyślną. Aby zażądać innych stylów lub wagi, dołącz dwukropek (:) do nazwy
czcionkę, a po niej listę stylów lub wagi rozdzielonych przecinkami (,).
Na przykład:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Aby dowiedzieć się, jakie style i grubości są dostępne dla danej czcionki, zapoznaj się z z listy czcionek w Google Fonts.
Dla każdego stylu, o który prosisz, możesz podać pełną nazwę lub skrót; w przypadku wag możesz podać wagę liczbową:
| Styl | Specyfikatory |
|---|---|
| kursywa | italic lub i |
| pogrubienie | bold lub b albo waga liczbowa, np. 700 |
| pogrubiona kursywa | bolditalic lub bi |
Aby na przykład zażądać pogrubienia Cantarell i Droid Serif, możesz użyć dowolnej tych adresów URL:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Użyj typu font-display
font-display pozwala
kontrolować, co się dzieje, gdy czcionka jest niedostępna. Określanie innej wartości
niż domyślna wartość auto jest zwykle odpowiednia.
Przekaż odpowiednią wartość w parametrze display ciągu zapytania:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Określanie podzbiorów skryptów
Niektóre czcionki z katalogu czcionek Google Font obsługa wielu skryptów (na przykład alfabetu łacińskiego, cyrylicy i greckiego). W zamówieniu aby określić, które podzbiory mają być pobierane, parametr podzbioru powinien być .
Na przykład, aby zażądać podzbioru cyrylicy funkcji Roboto Mono, adres URL być:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Aby poprosić o podzbiór greckiego zbioru danych Roboto Mono, adres URL być:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Aby zażądać podzbioru zarówno greckiego, jak i cyrylicy Roboto Mono, adres URL być:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Podzbiór alfabetu łacińskiego jest zawsze uwzględniany, jeśli jest dostępny i nie trzeba go określać. Pamiętaj, że jeśli przeglądarka kliencka obsługuje zakres Unicode (http://caniuse.com/#feat=font-unicode-range) parametr podzbioru jest ignorowany, przeglądarka wybiera spośród podzbiorów obsługiwane przez czcionkę, aby uzyskać informacje potrzebne do wyrenderowania tekstu.
Pełną listę dostępnych czcionek i podzbiorów czcionek znajdziesz tutaj: Czcionki Google.
Optymalizowanie żądań czcionek
Często, gdy chcesz użyć czcionki internetowej w swojej witrynie lub aplikacji, wiedzieć z wyprzedzeniem, które litery będą potrzebne. Dzieje się tak często, gdy korzystasz z czcionki witryny w logo lub nagłówku.
W takich przypadkach określ wartość text= w czcionce.
żądania. Dzięki temu Google zwróci plik czcionki zoptymalizowany pod kątem
użytkownika. W niektórych przypadkach może to zmniejszyć rozmiar pliku czcionki nawet o 90%.
Aby korzystać z tej funkcji, wystarczy dodać text= do żądań do interfejsu Google Fonts API. Dla:
Jeśli na przykład w tytule bloga używasz tylko znaków Inconsolata, możesz umieścić
samego tytułu jako wartości text=. Tak wygląda żądanie
lubię:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Tak jak w przypadku wszystkich ciągów zapytań, wartość powinna być zakodowana w adresie URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Funkcja działa również w przypadku czcionek międzynarodowych, umożliwiając określenie kodowania UTF-8. znaków. Na przykład ¡Hola! jest reprezentowany jako:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Włączanie efektów czcionek (beta)
Tworząc nagłówki lub teksty reklam w witrynie, warto nadać tekstowi dekoracyjny styl. Aby ułatwić Ci pracę, wprowadziliśmy podaliśmy kolekcję efektów czcionek, których można użyć tworzyć piękny tekst wyświetlany w reklamach. Na przykład:
Aby korzystać z tej funkcji w wersji beta, po prostu dodaj effect= do Google Fonts
API i dodać odpowiednią nazwę klasy do elementów HTML,
na które warto wpłynąć. W przykładzie powyżej użyliśmy efektu czcionki shadow-multiple,
więc żądanie będzie wyglądać tak:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Aby używać tego efektu, dodaj do elementów HTML odpowiednią nazwę klasy.
nazwa danej klasy to zawsze nazwa efektu poprzedzona ciągiem font-effect-,
więc nazwa klasy shadow-multiple będzie miała postać font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Możesz poprosić o wiele efektów, rozdzielając nazwy efektów pionową kreską.
znak (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Oto pełna lista wszystkich oferowanych przez nas efektów czcionek:
| Efekt | Nazwa interfejsu API | Nazwa zajęć | Pomoc |
|---|---|---|---|
| Anaglif | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| Baner z cegieł | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| Odbitka na płótnie | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| Trzeszczenie | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| Zniszczenie | destruction |
font-effect-destruction |
Chrome, Safari |
| Zdenerwowany | distressed |
font-effect-distressed |
Chrome, Safari |
| Twarde drewno | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| Embosy | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| Straż pożarna | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| Animacja ogniwa | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| Krucho | fragile |
font-effect-fragile |
Chrome, Safari |
| Trawy | grass |
font-effect-grass |
Chrome, Safari |
| lód, | ice |
font-effect-ice |
Chrome, Safari |
| Mitoza | mitosis |
font-effect-mitosis |
Chrome, Safari |
| Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| Konspekt | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| Zielony kolor | putting-green |
font-effect-putting-green |
Chrome, Safari |
| Stal pozyskiwana | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| Wiele cieni | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| Podzielono | splintered |
font-effect-splintered |
Chrome, Safari |
| Statyczny | static |
font-effect-static |
Chrome, Safari |
| Stonewash | stonewash |
font-effect-stonewash |
Chrome, Safari |
| Trójwymiarowa | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| Trójwymiarowa reklama swobodna | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| Stara klisza | vintage |
font-effect-vintage |
Chrome, Safari |
| Tapeta | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
Jest znacznie więcej sposobów na stylizowanie czcionek i możliwych jest też wiele różnych możliwości za pomocą CSS. Na początek mamy dla Ciebie kilka pomysłów. Więcej pomysły, wyszukaj w Google „efekty tekstowe CSS” oraz zapoznaj się z wieloma pomysłami, które są już dostępne w internecie.
Więcej informacji
- Pełną listę rodzin czcionek znajdziesz na stronie Czcionki Google.
- Dowiedz się, jak użyć narzędzia Web Font Loader, by większą kontrolę nad ładowaniem czcionek.
- Dowiedz się więcej o tym, jak interfejs Google Fonts API działa na stronach Uwagi techniczne.