Czcionki Google Fonts są teraz w pełni obsługiwane w zmiennych w wersji 2 interfejsu API. Wyjaśnimy, jak wywoływać zarówno pojedyncze, jak i wiele rodzin czcionek, oraz jak określać zakresy osi. Aby dowiedzieć się więcej o zmiennych zmiennych, dowiedz się więcej z tej interaktywnej broszury Daera Berlowa z TypeNetwork.
Co się zmieniło
Wszystko zaczyna się od nowego podstawowego adresu URL:
https://fonts.googleapis.com/css2
Składnia służąca do określania stylów w każdej rodzinie została zmieniona w taki sposób, aby opisywała zmienną czcionki „przestrzenie projektowe”.
Skrócone przewodniki
Skopiuj i wklej ten kod HTML do pliku:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Plik należy otworzyć w przeglądarce przy użyciu przeglądarki Crimson Pro.
Wiele rodzin
Aby zażądać wielu rodzin, określ parametr family= dla każdej rodziny.
Aby na przykład ustawić czcionki Crimson Pro i Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Skopiuj i wklej ten kod HTML do pliku:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
Plik należy otworzyć w przeglądarce w przeglądarce z tekstem „Making the Beautiful” w Crimson Pro, a następnie w Literacie.
Zakresy osi
Czcionki zmiennych oferują szeroki zakres stylów, często bez dodatkowych opóźnień. Dotyczy to elastycznego projektowania stron. Ta dynamiczna typografia korzysta z ciągłych zakresów stylów, które zapewniają pełną wagę od 100 do 900 na stronie, a także mogą elastycznie dostosowywać wagę niektórych warunków.
Aby poprosić o zakres zmiennej zmiennej, użyj czcionki ..
| Czcionki | Żądanie |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Kursywa [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro pogrubiona kursywa i [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Pojedyncze style, np. waga
Bez specyfikacji stylu interfejs API udostępnia styl domyślny żądanej rodziny. Aby wysłać żądanie innego stylu, np. konkretnych wag, dodaj dwukropek (:) po nazwie rodziny czcionek, po której następuje lista słów kluczowych związanych z właściwością osi w kolejności alfabetycznej, znak (@) i co najmniej jedną listę wartości właściwości osi.
Te przykłady pokazują, jak to działa.
| Czcionki | Żądanie |
|---|---|
| Crimson Pro (domyślnie) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro – pogrubienie | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro – pogrubienie | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro – pogrubiona i pogrubiona kursywa | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Czcionki Google wyświetlają wszystkie style dostępne dla każdej rodziny czcionek.
Styl domyślny
Jeśli w żądaniu nie określono pozycji lub zakresu osi, zostanie użyta pozycja domyślna. Domyślna pozycja na osi kursywy to 0 (normalnie), a na osi wagowej 400 (stała).
W przypadku rodzin z osiami, które nie zawierają pozycji domyślnej, żądania nieokreślające pozycji tych osi będą kończyć się niepowodzeniem. Gdy np. żądasz rodziny z osią wagi od 500 do 900, musisz określić pozycję wagi.
Niestandardowe wagi
Gdy używasz statycznych czcionek, style wagi są zwykle określane jako wielokrotności 100 (np. 300, 400, 700). Czcionki ze zmiennymi oferują zarówno standardowe, jak i pośrednie. Aby wyrenderować wagę pośrednią:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Optymalizacja pod kątem czasu oczekiwania i rozmiaru pliku
Określ dokładnie, jakich stylów używasz. Interfejs API przekazuje żądane style za pomocą kompaktowego zestawu czcionek. Żądanie nieużywanych stylów może spowodować, że użytkownicy będą pobierać więcej danych czcionek, niż potrzebują, co spowoduje większe opóźnienie. Jeśli używasz tylko 3 konkretnych wag, określ je w żądaniu jako indywidualne style. Jeśli używasz stałego zakresu wag, określ ten zakres w żądaniu.
Użyj font-display
Właściwość font-display pozwala kontrolować, co się dzieje, gdy czcionka jest nadal wczytywana lub w innym przypadku niedostępna. Zwykle podanie wartości innej niż domyślna auto jest odpowiednie.
Przekaż odpowiednią wartość w parametrze display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Optymalizowanie żądań czcionek
Często, jeśli chcesz używać czcionki internetowej w swojej witrynie lub aplikacji, z wyprzedzeniem wiesz, jakich liter potrzebujesz. Dzieje się tak często, gdy w logo lub nagłówku używasz czcionki internetowej.
W takich przypadkach rozważ określenie wartości text= w adresie URL żądania czcionki. Dzięki temu czcionki Google będą mogły zwrócić plik czcionki zoptymalizowany pod kątem Twojego żądania. W niektórych przypadkach może to zmniejszyć rozmiar pliku czcionki nawet o 90%.
Aby korzystać z tej funkcji, wystarczy dodać text= do żądania do interfejsu API. Jeśli na przykład w tytule swojego bloga używasz tylko operatora Conconsolata, możesz ustawić go jako wartość text=. Żądanie może wyglądać tak:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Tak jak w przypadku wszystkich ciągów zapytań, wartość należy zakodować do adresu URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Ta funkcja działa też w przypadku czcionek międzynarodowych, umożliwiając określenie znaków UTF-8. Na przykład МHola! jest przedstawiane jako:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Pamiętaj, że parametr „text=' można określić tylko raz. Ma ona zastosowanie do wszystkich rodzin wskazanych w prośbie. Jeśli potrzebujesz różnych optymalizacji tekstu w różnych rodzinach, używaj osobnych żądań do interfejsu API.
Tworzenie URL-i interfejsu API
Dokładność
Ogólnie rzecz biorąc, zaktualizowany interfejs CSS API jest bardziej rygorystyczny w zakresie akceptowania żądań niż pierwotny interfejs API CSS.
Ogólne wskazówki:
- Lista osi alfabetycznie (
en-USjęzyk) - Grupy wartości osi (tzn. krotki) muszą zostać posortowane liczbowe
- Kropki nie mogą się nakładać ani dotykać (np.
wght400..500 i 500..600)
Specyfikacja interfejsu API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: nazwa rodziny czcionek
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: tag osi, np. ital, wdth, wght
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: wartość w zakresie odpowiedniej osi
text: tekst, który będzie wyświetlany w żądanym kroju pisma
display: auto | block | swap | fallback | optional
Obsługa starszych przeglądarek
Przeglądarki, które nie obsługują zmiennych czcionek, mogą nie wyświetlać projektu zgodnie z oczekiwaniami. Sprawdź obsługę zmiennych zmiennych w przeglądarkach na caniuse.
Stosując postępowe ulepszenia, możesz uniknąć nieoczekiwanego zachowania w tych starszych przeglądarkach. Używaj zapytań @supports w CSS, by odblokować funkcje zmiennych zmiennych.
W tym przykładzie chcemy wykorzystać wagę 450 tekstu Markazi, ale jeśli nie obsługujemy funkcji czcionek zmiennych, trzeba będzie wrócić do trybu zwykłego (wagi 400) lub średniego (wagi 500):
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Żądanie CSS Markazi+Text:wght@450 wysyła wagę 450 do klientów, które obsługują zmienne czcionki, i 400, i 500 dla klientów, które nie obsługują tej funkcji. Ogólnie reklamy zastępcze w zakresie żądania będą dostępne w starszych przeglądarkach.
| Axis | Zachowanie awaryjne |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Te przykłady pokazują, jakie style byłyby dostępne w starszych przeglądarkach dla kilku różnych żądań.
| Żądanie | Style dostępne w starszych przeglądarkach |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Dostępne czcionki zmiennych
Tabela zmiennych czcionek dostępnych w API v2 znajduje się tutaj.
Więcej informacji
- Pełną listę rodzin czcionek dostępnych w interfejsie Google Fonts API znajdziesz w Google Fonts.
- Więcej informacji o działaniu interfejsu Google Fonts API znajdziesz na stronie Uwagi techniczne.