Z tego przewodnika dowiesz się, jak dodawać czcionki do stron za pomocą interfejsu Google Fonts API. Nie musisz programować: wystarczy, że dodasz do dokumentu HTML specjalny link do arkusza stylów, a następnie oznaczysz czcionkę 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 z takimi tekstem o nazwie pomarańczowy:
Jest to zwykły tekst, więc możesz zmienić jego wygląd za pomocą CSS. Spróbuj dodać cień do stylu z poprzedniego przykładu:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Pod tekstem powinien być widoczny cień:
A to dopiero początek działań, jakie można zrobić dzięki interfejsowi Fonts API i CSS.
Opis
Aby zacząć korzystać z interfejsu Google Fonts API, wystarczy 2 kroki:
Dodaj link do arkusza stylów, aby poprosić o wybrane czcionki internetowe:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Nadaj elementowi styl żądaną czcionkę internetową, korzystając z arkusza stylów:
.css-selector { font-family: 'Font Name', serif; }
za pomocą stylu wbudowanego w sam element:
<div style="font-family: 'Font Name', serif;">Your text</div>
Listę dostępnych czcionek znajdziesz na stronie Google Fonts.
Określanie rodzin czcionek i stylów w adresie URL arkusza stylów
Aby określić adres URL, którego chcesz użyć w linku do arkusza stylów, zacznij od podstawowego adresu URL interfejsu Google Fonts API:
https://fonts.googleapis.com/css
Następnie dodaj parametr adresu URL family=
z co najmniej 1 nazwą rodziny czcionek i stylem.
Aby na przykład wysłać żądanie czcionki Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
Aby poprosić o wiele rodzin czcionek, rozdziel nazwy pionową kreską (|
).
Aby na przykład zażądać czcionek Tangerine, Inconsolata i Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Żądanie wielu czcionek umożliwia wykorzystanie wszystkich tych czcionek na stronie. (Nie przesadzaj z zapasem – większość stron nie potrzebuje bardzo wielu czcionek, a zbyt duża liczba czcionek może spowolnić wczytywanie stron).
Interfejs Google Fonts API domyślnie udostępnia standardową wersję żądanych czcionek. Aby poprosić o inne style lub wagi, do nazwy czcionki dodaj dwukropek (:
), a po nim listę stylów lub wag oddzielonych przecinkami (,
).
Na przykład:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Informacje o tym, jakie style i gruby są dostępne w przypadku danej czcionki, znajdziesz na jej liście w Google Fonts.
Do każdego stylu możesz podać pełną nazwę lub skrót. W przypadku wag możesz też podać wagę liczbową:
Styl | Specyfikacje |
---|---|
kursywa | italic lub i |
pogrubienie | bold lub b albo waga liczbowa, np. 700 |
pogrubiona kursywa | bolditalic lub bi |
Aby na przykład zastosować pogrubienie do Cantarell i Droid Serif, możesz użyć dowolnego z 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 wartości Font-display
font-display pozwala określić, co ma się stać, gdy czcionka ma być niedostępna. Należy zazwyczaj podać wartość inną niż domyślna wartość auto
.
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 obsługują wiele skryptów (np. alfabet łaciński, cyrylica i grecki). Aby określić, które podzbiory mają być pobierane, do adresu URL należy dołączyć parametr podzbioru.
Aby np. zażądać podzbioru cyrylicy czcionki Roboto Mono, adres URL będzie wyglądać tak:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Aby wysłać żądanie greckiego podzbioru czcionki Roboto Mono, adres URL wygląda tak:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Aby zażądać zarówno podzbioru greckiego, jak i podzbioru cyrylicy czcionki Roboto Mono, adres URL będzie wyglądać tak:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Podzbiór łaciński jest zawsze uwzględniany, jeśli jest dostępny i nie trzeba go określać. Pamiętaj, że jeśli przeglądarka klienta obsługuje zakres Unicode (http://caniuse.com/#feat=font-unicode-range), parametr podzbioru jest ignorowany. Przeglądarka wybierze jeden z podzbiorów obsługiwanych przez czcionkę, aby pobrać to, czego potrzebuje do wyrenderowania tekstu.
Pełną listę dostępnych czcionek i podzbiorów czcionek znajdziesz na stronie Google Fonts.
Optymalizacja żądań czcionek
Jeśli chcesz użyć czcionki internetowej w witrynie lub aplikacji, często wiesz z wyprzedzeniem, jakie litery będą potrzebne. Często dzieje się tak, gdy używasz czcionki internetowej w logo lub nagłówku.
W takich przypadkach możesz podać wartość text=
w adresie URL żądania czcionki. Pozwoli to Google zwrócić plik czcionki zoptymalizowany pod kątem Twojego żądania. W niektórych przypadkach może to zmniejszyć rozmiar pliku czcionek nawet o 90%.
Aby korzystać z tej funkcji, dodaj atrybut text=
do żądań do interfejsu Google Fonts API. Jeśli na przykład używasz nazwy Inconsolata tylko jako tytuł bloga, możesz podać sam tytuł jako wartość właściwości text=
. Prośba może wyglądać tak:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Tak jak w przypadku wszystkich ciągów zapytań, wartość należy zakodować w adresie URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Funkcja ta działa również w przypadku czcionek międzynarodowych, umożliwiając określanie znaków UTF-8. Na przykład ŚwietneHola! jest reprezentowana jako:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Włączanie efektów czcionek (beta)
Tworząc nagłówki lub wyświetlane teksty w witrynie, warto nadać tekstowi styl, który będzie ozdobiony. Aby ułatwić Ci pracę, Google udostępnia kolekcję efektów czcionek, których możesz użyć do wygenerowania atrakcyjnego tekstu wyświetlanego bez większego wysiłku. Na przykład:
Aby skorzystać z tej funkcji w wersji beta, wystarczy dodać effect=
do żądania do interfejsu Google Fonts API i dodać odpowiednią nazwę klasy do elementów HTML, które mają zostać zmienione. W powyższym przykładzie użyliśmy efektu czcionki shadow-multiple
, więc żądanie wyglądałoby tak:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Aby użyć tego efektu, dodaj do elementów HTML odpowiednią nazwę klasy. Odpowiednia nazwa klasy to zawsze nazwa efektu poprzedzona ciągiem font-effect-
. Dlatego nazwa klasy dla shadow-multiple
będzie wyglądać tak: font-effect-shadow-multiple
:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Możesz zażądać wielu efektów, rozdzielając ich nazwy pionową kreską (|
).
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 |
---|---|---|---|
Anglif | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
Znak ceglany | brick-sign |
font-effect-brick-sign |
Chrome i Safari |
Odbitka na płótnie | canvas-print |
font-effect-canvas-print |
Chrome i Safari |
Pęknięcie | crackle |
font-effect-crackle |
Chrome i Safari |
decaying |
font-effect-decaying |
Chrome i Safari | |
Zniszczenie | destruction |
font-effect-destruction |
Chrome i Safari |
Stresowany | distressed |
font-effect-distressed |
Chrome i Safari |
Twarde drewno | distressed-wood |
font-effect-distressed-wood |
Chrome i Safari |
Embos | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
Straż pożarna | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
Animacja przedstawiająca pożar | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
Ekspresyjne | fragile |
font-effect-fragile |
Chrome i Safari |
trawa | grass |
font-effect-grass |
Chrome i Safari |
Lód | ice |
font-effect-ice |
Chrome i Safari |
Mitoza | mitosis |
font-effect-mitosis |
Chrome i Safari |
Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
Obrys | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
Uderzanie zieleni | putting-green |
font-effect-putting-green |
Chrome i Safari |
Miękka stal | scuffed-steel |
font-effect-scuffed-steel |
Chrome i Safari |
Wiele cieni | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
Rozdrobnione | splintered |
font-effect-splintered |
Chrome i Safari |
Statyczny | static |
font-effect-static |
Chrome i Safari |
Czyszczenie kamienia | stonewash |
font-effect-stonewash |
Chrome i Safari |
Trójwymiarowe | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
Trójwymiarowa swobodna | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
Stara klisza | vintage |
font-effect-vintage |
Chrome i Safari |
Tapeta | wallpaper |
font-effect-wallpaper |
Chrome i Safari |
Styl czcionek można zmienić na wiele innych sposobów, a dzięki CSS można wiele osiągnąć. Mamy dla Ciebie tylko kilka wskazówek, które ułatwią Ci start. Aby znaleźć więcej pomysłów, wyszukaj w Google „efekty tekstowe CSS” i przejrzyj wiele pomysłów, które są już dostępne w internecie.
Więcej informacji
- Zobacz pełną listę rodzin czcionek udostępnionej przez interfejs Google Fonts API w Google Fonts.
- Dowiedz się, jak użyć programu do wczytywania czcionek internetowych, aby mieć większą kontrolę nad ładowaniem czcionek.
- Więcej informacji o tym, jak działa interfejs Google Fonts API, znajdziesz na stronie Uwagi techniczne.