W ramach aktualizacji interfejsu API w wersji 2 Google Fonts w pełni obsługuje teraz czcionki zmiennych. Na wyjaśnić, jak wywoływać zarówno pojedyncze, jak i z wieloma rodzinami czcionek oraz jak określić, zakresów osi. Aby dowiedzieć się więcej o zmiennych czcionkach, przeczytaj broszura z interaktywną ilustracją Davida Berlowa z firmy TypeNetwork.
Nowości
Wszystko zaczyna się od nowego podstawowego adresu URL:
https://fonts.googleapis.com/css2
Składnia, która służy do określania stylów w poszczególnych rodzinach, została zmieniona. zmienna „design przestrzeni”.
Krótkie 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>
Otwórz plik w przeglądarce, a na stronie powinien wyświetlić się tekst „Making the „Web Beautiful” (czcionka Karmazynowa Pro).
Wiele rodzin
Aby poprosić o dodanie kilku rodzin, określ parametr family= dla każdej z nich.
Na przykład, aby zażądać czcionek Crimson Pro oraz 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>
Jeśli do otwarcia pliku użyj przeglądarki, strona powinna wyrenderować tekst „Making the Web Beautiful” najpierw w Crimson Pro, a potem w literaturze.
Zakresy osi
Czcionki zmiennoprzecinkowe zapewniają ciągłe zakresy stylów, często bez dodatkowych opóźnienia. Dotyczy to elastycznego projektowania stron. Ta dynamiczna typografia wykorzystuje ciągłe zakresy stylów, oferując wszystkie wagi na stronie w przedziale od 100 do 900 oraz elastyczne dostosowywanie wagi na podstawie pewnych warunków.
Aby zażądać zakresu zmiennej osi czcionki, połącz 2 wartości za pomocą funkcji ..
| Czcionki | Żądanie |
|---|---|
Karmazynowy Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Karmazynowa kursywa Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Karmazynowy Pro pogrubiona kursywa [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
indywidualne style, np. waga;
Jeśli nie określisz stylu, interfejs API użyje stylu domyślnego wysłano prośbę o grupę rodzinną. Aby poprosić o inne indywidualne style, takie jak konkretne wagi, dodaj dwukropek (:) po nazwie rodziny czcionek, a następnie listę osi słowa kluczowe związane z właściwością w kolejności alfabetycznej, znak małpy (@) i co najmniej jedna lista wartości tych właściwości.
Te przykłady pokazują, jak to działa.
| Czcionki | Żądanie |
|---|---|
| Karmazynowy Pro (domyślny) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Karmazynowy Pro pogrubiony | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Karmazynowe Pro (standardowe) Pogrubienie | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Karmazynowy Pro pogrubiony Pogrubiona kursywa | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Czcionki Google zawierają listę wszystkich stylów dostępnych dla każdej rodziny czcionek.
Styl domyślny
Jeśli żądanie nie określa pozycji lub zakresu osi, domyślnie . Domyślną pozycją osi kursywy jest 0 (normalne) i domyślna wartość dla osi wagi to 400 (standardowa).
W przypadku rodzin z osiami, które nie zawierają pozycji domyślnej, żądania, które je zawierają nie będzie można określić pozycji tych osi. Na przykład gdy prosisz o z osią wagi od 500 do 900, waga musi być określone dane.
Wagi niestandardowe
W przypadku czcionek statycznych style wagi są zwykle określane jako wielokrotności liczby 100 (np. 300, 400, 700). Czcionki zmienne oferują zarówno standardową grubość, jak i ciężarów pośrednich. Aby wyrenderować wagę pośrednią:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Optymalizacja pod kątem czasu oczekiwania i rozmiaru pliku
Staraj się dokładnie określać używane style. Interfejs API dostarcza żądane style korzystając z najbardziej kompaktowego zestawu czcionek. Żądanie nieużywanych stylów może spowodować, że użytkownicy pobierają więcej danych dotyczących czcionek, niż jest to potrzebne, co powoduje większe opóźnienia. Jeśli używasz tylko 3 określone wagi – określ je w żądaniu jako osobne style. Jeśli używać stałego zakresu wag, określ go w żądaniu.
Użyj ustawienia font-display
font-display
pozwalają określić, co się dzieje, gdy czcionka jest wciąż wczytywana,
w inny sposób niedostępne. Określanie wartości innej niż domyślna auto jest
jest zwykle odpowiednie.
Przekaż odpowiednią wartość w parametrze display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Optymalizowanie żądań czcionek
Często, gdy chcesz użyć w witrynie lub aplikacji czcionki internetowej, 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 Fonts może zwracać plik czcionek zoptymalizowany pod kątem
na Twoją prośbę. W niektórych przypadkach może to zmniejszyć rozmiar pliku czcionki nawet o
i o 90%.
Aby korzystać z tej funkcji, wystarczy dodać text= do żądania do interfejsu API. Na przykład, jeśli
używasz Inconsolata jako tytułu bloga,
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ść powinna być zakodowana w adresie URL:
https://fonts.googleapis.com/css2?family=Comfortaa&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 przedstawiana jako:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Pamiętaj, że w przypadku klawisza 'text= można określić tylko raz. Ma zastosowanie do wszystkich rodzin objętych prośbą. W razie potrzeby używaj oddzielnych żądań do interfejsu API różne optymalizacje tekstu w wielu rodzinach.
URL-e interfejsu API kształtowania
Dokładność
Ogólnie rzecz biorąc, zaktualizowany interfejs CSS API dokładniej określa, które żądania akceptowalna niż pierwotny interfejs API usługi porównywania cen.
Wytyczne ogólne:
- Wyświetl osie alfabetycznie (
en-USjęzyk) - Grupy wartości na osi (tj. krotki) muszą być sortowane numerycznie
- Kropki nie mogą się nakładać ani dotknąć (np.
wght400..500 i 500..600)
Specyfikacja adresu URL 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 wybranym krojem czcionki.
display: auto | block | swap | fallback | optional
Obsługa starszych przeglądarek
Przeglądarki, które nie obsługują zmiennych czcionek, mogą nie być w stanie wyświetlić Twojego projektu jako zamierzone. Sprawdź obsługę zmiennych czcionek przeglądarki w caniuse.
Ćwicz stopniowe ulepszanie,
możesz uniknąć nieoczekiwanego działania
w starszych przeglądarkach. Użyj formatu: @supports
w arkuszach CSS, aby ograniczyć funkcje zmiennych czcionek.
W tym przykładzie chcemy użyć wagi 450 w tekście Markazi, ale będziemy musieli z powrotem – Standardowa (waga 400) lub Średnia (waga 500), funkcje czcionek nie są obsługiwane:
<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 usługi porównywania cen Markazi+Text:wght@450 wysyła wagę 450 do klientów, którzy obsługują
z różnymi czcionkami i wielkością 400 i 500 innym. Ogólnie rzecz biorąc,
wartości zastępcze z zakresu żądania będą dostępne w starszych przeglądarkach.
| Axis | Wartości zastępcze |
|---|---|
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 przez kilka 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
Tabelę z czcionkami zmiennych dostępnymi w interfejsie API w wersji 2 znajdziesz tutaj.
Więcej informacji
- Pełną listę rodzin czcionek znajdziesz na stronie Czcionki Google.
- Dowiedz się więcej o tym, jak interfejs Google Fonts API działa na stronach Uwagi techniczne.