Aktualizacja interfejsu CSS API

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).

Co zrobić, aby internet był piękny

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.

Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny

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
Wygląda na to, że Twoja przeglądarka nie obsługuje czcionek zmiennych (caniuse). W przeglądarce, która obsługuje odmiany czcionek, następujący tekst powinien zostać wyrenderowany Karmazynowy Pro jako płynny zestaw wag od 400 do 500. Animacje CSS mogą sprawić, płynnie zmieniać styl tekstu podczas interakcji.
Jeśli Twoja przeglądarka w pełni obsługuje czcionki zmienne (caniuse): następujący tekst powinien wyrenderować Karmazynowy Pro jako gładki zestaw wag z Od 400 do 500. Animacje CSS mogą sprawić, że tekst będzie płynnie zmieniać styl podczas interakcji.
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny

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
Wygląda na to, że Twoja przeglądarka nie obsługuje czcionek zmiennych (caniuse). W przeglądarce który obsługuje różne odmiany czcionek, poniższy tekst powinien wyświetlić kolor Karmazynowy Pro z wyraźnymi wagami 400, 450 i 500.
Jeśli Twoja przeglądarka w pełni obsługuje czcionki zmienne (caniuse), poniższy tekst powinien renderować Karmazynowy Pro przy widocznych wizualnie wagach 400, 450 i 500.
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny
Co zrobić, aby internet był piękny

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-US język)
  • Grupy wartości na osi (tj. krotki) muszą być sortowane numerycznie
  • Kropki nie mogą się nakładać ani dotknąć (np. wght 400..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.