Interfejs API dla szybkich i atrakcyjnych czcionek internetowych

Jak używać interfejsu API CSS Google Fonts do wydajnego dostarczania czcionek internetowych.

Jimmy Mooney

Na przestrzeni lat wiele się zmieniło w technologii czcionek internetowych. To, co kiedyś było niszowe, wymagało obrazu tekstu lub wtyczki Flash (i które utrudniało optymalizację witryny pod kątem wyszukiwarek), a jednocześnie stało się standardową praktyką w internecie. Dawno, dawno temu przed załadowaniem strony trzeba było wczytać całą czcionkę (ze stylami i znakami, których być może nawet nie używasz), ale to już przeszłość.

Interfejs Google Fonts CSS API również ewoluował na przestrzeni lat, aby nadążać za zmianami w technologii czcionek internetowych. Ta funkcja bardzo różni się od pierwotnej propozycji wartości – aby przyspieszyć działanie sieci, umożliwiając przeglądarce zapisywanie w pamięci podręcznej często używanych czcionek we wszystkich witrynach korzystających z interfejsu API. Już nie jest, ale interfejs API nadal udostępnia dodatkowe i ważne optymalizacje, dzięki którym strony internetowe wczytują się szybko, a czcionki są poprawne.

Dzięki interfejsowi Google Fonts CSS API Twoja witryna może żądać tylko tych danych o czcionkach, które są niezbędne, aby ograniczyć do minimum czas ładowania arkusza CSS. Dzięki temu użytkownicy mogą szybciej wczytywać treści. Interfejs API będzie odpowiadać na każde żądanie przy użyciu najlepszej czcionki dla danej przeglądarki.

Wszystko to dzieje się dzięki umieszczeniu w kodzie jednego wiersza kodu HTML.

Jak korzystać z interfejsu Google Fonts CSS API

Podsumowanie tego znajdziesz w dokumentacji interfejsu API Google Fonts CSS:

Nie musisz programować – wystarczy, że dodasz do dokumentu HTML specjalny link do arkusza stylów, a następnie użyjesz czcionki w stylu CSS.

Wystarczy, że umieścisz w kodzie HTML jeden wiersz, na przykład:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

Żądając czcionki z interfejsu API, określasz rodzinę lub rodziny oraz, opcjonalnie, ich wagi, style, podzbiory i wiele innych opcji. Interfejs API obsłuży wtedy żądanie na jeden z dwóch sposobów:

1. Jeśli żądanie używa typowych parametrów, dla których interfejs API ma już pliki, natychmiast zwróci arkusz CSS użytkownikowi, kierując go do tych plików.
2. Jeśli żądanie dotyczy czcionki z parametrami, których interfejs API obecnie nie przechowuje, zostanie automatycznie podzielony na podgrupy, przy użyciu funkcji HarfBuzz, a później zwrócony kod CSS wskaże te czcionki.

Pliki czcionek mogą być duże, ale nie muszą

To prawda, że czcionki internetowe mogą być duże. W przypadku platformy WOFF2 1 waga pliku Noto Sans Japan to prawie 3,4 MB, a pobranie tej wersji dla każdego użytkownika przeciągałoby się w czasie wczytywania strony. Jeśli liczy się każda milisekunda, a każdy bajt jest cenny, chcesz mieć pewność, że wczytujesz tylko te dane, których potrzebują użytkownicy.

Interfejs Google Fonts CSS API może tworzyć bardzo małe pliki czcionek (nazywane podzbiorami) generowanymi w czasie rzeczywistym, aby udostępniać użytkownikom tylko tekst i style wymagane przez Twoją witrynę. Zamiast wyświetlać całą czcionkę, możesz zażądać konkretnych znaków za pomocą parametru text.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

Interfejs CSS API zapewnia również użytkownikom dodatkowe optymalizacje czcionek internetowych, automatycznie, bez żadnych parametrów API. Interfejs API udostępni użytkownikom pliki CSS z włączonym interfejsem unicode-range (jeśli przeglądarka je obsługuje), więc będą wczytywane czcionki tylko w przypadku znaków, których potrzebuje Twoja witryna.

Deskryptor CSS zakresu unicode to jedno z narzędzi, których można teraz używać do walki z pobieraniem dużych czcionek. Ta właściwość CSS ustawia zakres znaków Unicode, które zawiera deklaracja @font-face. Jeśli jeden z tych znaków zostanie wyrenderowany na stronie, zostanie on pobrany. Ta metoda sprawdza się w przypadku wszystkich rodzajów języków, więc możesz użyć czcionki zawierającej znaki łacińskie, greckie lub cyrylicy i utworzyć mniejsze podzbiory. Na poprzednim wykresie widać, że w przypadku wczytania wszystkich tych 3 zestawów znaków byłoby to ponad 600 glifów.

Włączenie tej opcji spowoduje też włączenie w internecie czcionek w języku chińskim, japońskim i koreańskim (CJK). Na poprzednim wykresie widać, że czcionka CJK obejmuje 15–20 razy więcej znaków niż czcionka alfabetu łacińskiego. Są one zwykle bardzo duże i wiele znaków w tych językach jest używanych rzadziej niż inne.

Użycie interfejsu CSS API i funkcji Unicode może zmniejszyć transfer plików o około 90%. Za pomocą deskryptora unicode-range możesz oddzielnie zdefiniować każdy wycinek. Każdy wycinek jest pobierany tylko wtedy, gdy treść zawiera jeden ze znaków z tych zakresów znaków.

Przykład: jeśli w tagu Noto Sans JP chcesz ustawić tylko słowo „dostać"}ちん, możesz:

• Samodzielnie hostuj własne pliki WOFF2.
• Użyj interfejsu CSS API, aby pobrać WOFF2.
• Użyj interfejsu CSS API z parametrem text= ustawionym na „ partikon” .

W tym przykładzie widać, że korzystając z interfejsu CSS API, oszczędzasz już 97,5% w porównaniu z przechowywaniem na własnym serwerze czcionki WOFF2.Jest to możliwe dzięki wbudowanej obsłudze podziału dużych czcionek na zakres Unicode. Jeśli pójdziesz o krok dalej i określisz dokładnie tekst, który chcesz wyświetlać, możesz jeszcze bardziej zmniejszyć rozmiar czcionki do 95,3% czcionki interfejsu CSS API – to o 99,9% mniej niż w przypadku czcionki hostowanej samodzielnie.

Interfejs Google Fonts CSS API automatycznie dostarcza czcionki w najmniejszym i najbardziej zgodnym formacie obsługiwanym przez przeglądarkę użytkownika. Jeśli użytkownik korzysta z przeglądarki z obsługą WOFF2, interfejs API dostarczy czcionki w standardzie WOFF2, ale jeśli użytkownik korzysta ze starszej przeglądarki, interfejs API dostarczy czcionki w formacie obsługiwanym przez tę przeglądarkę. Aby zmniejszyć rozmiar pliku dla każdego użytkownika, interfejs API usuwa też dane z czcionek, gdy nie są potrzebne. Na przykład dane o wskaźnikach będą usuwane w przypadku użytkowników, których przeglądarki ich nie potrzebują.

Przygotuj się na przyszłość swoich czcionek internetowych dzięki interfejsowi CSS Google Fonts

Zespół Google Fonts ma również swój wkład w pracę nad nowymi standardami W3C, które stale ulepszają technologie czcionek internetowych, np. WOFF2. Jednym z bieżących projektów jest przyrostowe przesyłanie czcionek, które umożliwia użytkownikom ładowanie bardzo małych fragmentów plików czcionek, które są używane na ekranie, i przesyłanie ich strumieniowo na żądanie. Przekracza to wydajność zakresu Unicode. Gdy używasz naszego interfejsu Web Fonts API, Twoi użytkownicy uzyskują dostęp do tych usprawnień technologii przenoszenia czcionek, gdy tylko zostaną udostępnione w ich przeglądarkach.

Na tym polega piękno interfejsu Fonts API: użytkownicy mogą czerpać korzyści z każdego udoskonalenia nowej technologii bez wprowadzania zmian na stronie. Nowy format czcionki internetowej? Żaden problem. Nowa obsługa przeglądarek lub systemów operacyjnych? Zadbaliśmy o jego zachowanie. Dzięki temu zamiast zaprzątać się obsługą czcionek internetowych, możesz skupić się na użytkownikach i treści.

Wbudowana obsługa zmiennych czcionek

Zmienne czcionki to pliki czcionek, w których można przechowywać różne odmiany projektowe wielu osi. W nowej wersji interfejsu Google Fonts CSS API je obsługujemy. Dodanie dodatkowej osi wariacji zapewnia większą elastyczność czcionki, ale może niemal dwukrotnie zwiększyć rozmiar pliku czcionek.

Jeśli podasz więcej szczegółów w żądaniu do interfejsu CSS API, interfejs Google Fonts CSS API może wyświetlać tylko część zmiennej czcionki wymaganej w Twojej witrynie, aby zmniejszyć rozmiar pobieranego pliku. Umożliwia to korzystanie ze zmiennych czcionek w internecie bez wydłużania czasu wczytywania strony. Możesz to zrobić, określając pojedynczą wartość na osi lub zakres. Możesz nawet określić wiele osi i rodziny czcionek, wszystkie w jednym żądaniu. Interfejs API jest elastyczny, aby sprostać Twoim potrzebom.

Łatwe do wdrożenia i zoptymalizowane pod kątem Twoich potrzeb

Interfejs Google Fonts CSS API pomaga w dostarczaniu czcionek, które:

• Większa zgodność z przeglądarkami internetowymi.
• Jak najmniejszy.
• Szybka dostawa.
• Łatwiejsze w użyciu.

Więcej informacji o Google Fonts znajdziesz na stronie fonts.google.com. Więcej informacji o interfejsie CSS API znajdziesz w dokumentacji interfejsu API.

Podziękowania

Baner powitalny od: leesehee.