Jak używać interfejsu Google Fonts CSS API do efektywnego dostarczania czcionek internetowych.
Przez lata technologia czcionek internetowych bardzo się zmieniła. To, co wcześniej było niszowe, wymagało dodania obrazu tekstu lub wtyczki Flash (co mogło utrudniać optymalizację witryny pod kątem wyszukiwarek) jest teraz standardem w internecie. Dawno, dawno temu trzeba było załadować całą czcionkę, zanim strona się załadowała – ze stylami i znakami, których być może nawet nie używałeś – ale to już reszta.
Interfejs CSS Google Fonts API również ewoluował na przestrzeni lat, aby nadążać za zmianami w technologii czcionek internetowych. Od czasu swojej pierwotnej propozycji wartościowej (czyli przyspieszenia działania internetu przez umożliwienie przeglądarce buforowania często używanych czcionek we wszystkich witrynach, które korzystają z interfejsu API) minęło wiele czasu. To już nie jest prawdą, ale interfejs API nadal zapewnia dodatkowe i ważne optymalizacje, aby witryny wczytywały się szybko, a czcionki działały prawidłowo.
Dzięki interfejsowi Google Fonts CSS API Twoja witryna może żądać tylko tych danych czcionki, których potrzebuje, aby zminimalizować czas wczytywania CSS. Dzięki temu użytkownicy witryny mogą wczytywać treści tak szybko, jak to możliwe. Interfejs API będzie odpowiadać na każde żądanie, zwracając najlepszą czcionkę dla danej przeglądarki.
Wystarczy dodać jedną linię kodu HTML.
Jak korzystać z interfejsu Google Fonts CSS API
Dokumentacja interfejsu Google Fonts API CSS podsumowuje to w prosty sposób:
Nie musisz nic programować. Wystarczy, że dodasz do dokumentu HTML specjalny link do arkusza stylów, a następnie zwrócisz uwagę na czcionkę w stylu CSS.
Musisz tylko umieścić w kodzie HTML jeden wiersz, podobny do tego:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Gdy żądasz czcionki z interfejsu API, musisz określić, które rodziny czcionek Cię interesują, a opcjonalnie ich grubości, style, podzbiory i wiele innych opcji. Interfejs API przetworzy żądanie na jeden z dwóch sposobów:
- Jeśli żądanie używa wspólnych parametrów, które są już dostępne w interfejsie API, natychmiast zwróci ono użytkownikowi pliki CSS, kierując go do tych plików.
- Jeśli żądasz czcionki z parametrami, które nie są obecnie w pamięci podręcznej interfejsu API, czcionki zostaną podzielone na podzbiory na bieżąco, korzystając z biblioteki HarfBuzz, aby to przyspieszyć, a następnie zwróci się plik CSS, który do nich odwołuje.
Pliki czcionek mogą być duże, ale nie muszą
czcionki internetowe mogą być duże. Tylko jeden krój czcionki Noto Sans Japanese w WOFF2 zajmuje prawie 3,4 MB. Pobieranie tej czcionki przez każdego użytkownika wydłużyłoby czas wczytywania strony. Gdy każda milisekunda i każdy bajt są cenne, chcesz mieć pewność, że wczytujesz tylko dane, których potrzebują użytkownicy.
Interfejs Google Fonts CSS API może tworzyć bardzo małe pliki czcionek (zwane podzbiorami), generowane 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ć określonych 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 automatycznie zapewnia użytkownikom dodatkowe optymalizacje czcionek internetowych, bez żadnych parametrów interfejsu API. Interfejs API będzie udostępniać użytkownikom pliki CSS z użyciem unicode-range (jeśli ich przeglądarka obsługuje tę funkcję), dzięki czemu wczytują czcionki tylko dla określonych znaków potrzebnych w witrynie.
Opisacz CSS zakresu kodów Unicode to jedno z narzędzi, które można teraz wykorzystać do ograniczenia pobierania 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 jest renderowany na stronie, czcionka jest pobierana. Ta metoda sprawdza się w przypadku wszystkich języków, więc możesz użyć czcionki zawierającej znaki łacińskie, greckie lub cyryliczne i utworzyć mniejsze podzbiory. Jak widać na wykresie powyżej, gdyby trzeba było załadować wszystkie 3 z tych zestawów znaków, zajęłoby to ponad 600 glifów.
Umożliwia to też stosowanie czcionek w języku chińskim, japońskim i koreańskim (CJK) w internecie. Z powyższego wykresu wynika, że czcionka CJK zawiera 15–20 razy więcej znaków niż czcionka z literami łacińskimi. Te czcionki są zwykle bardzo duże, a wiele znaków w tych językach nie jest używanych tak często jak inne.
Korzystanie z interfejsu API CSS i zakresu kodów Unicode może zmniejszyć transfery plików o około 90%. Za pomocą deskryptora unicode-range możesz zdefiniować każdą część osobno, a każdy fragment jest pobierany tylko wtedy, gdy Twoje treści zawierają jeden z znaków z tych zakresów.
Przykład: jeśli chcesz ustawić tylko słowo „こんにちは” w czcionce Noto Sans JP, możesz:
- hostować własne pliki WOFF2.
- Pobierz plik WOFF2 za pomocą interfejsu API usługi porównywania cen.
- Użyj interfejsu CSS API z parametrem text= ustawionym na „こんにちは”.
W tym przykładzie widać, że korzystając z interfejsu CSS API, już oszczędzasz 97,5% w stosunku do samodzielnego hostowania czcionki WOFF2, dzięki wbudowanej obsłudze separowania dużych czcionek w zakresie Unicode. Jeśli określisz dokładnie tekst, który chcesz wyświetlić, możesz jeszcze bardziej zmniejszyć rozmiar czcionki do 95,3% czcionki interfejsu API CSS. Oznacza to, że rozmiar czcionki będzie o 99,9% mniejszy niż w przypadku czcionki hostowanej lokalnie.
Interfejs Google Fonts CSS API automatycznie udostępnia czcionki w najmniejszym i najbardziej zgodnym formacie obsługiwanym przez przeglądarkę użytkownika. Jeśli użytkownik korzysta z przeglądarki obsługującej WOFF2, interfejs API dostarczy czcionki w formacie WOFF2, ale jeśli używa 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 podpowiedzi będą usuwane w przypadku użytkowników, których przeglądarki nie potrzebują.
Przygotowanie czcionek internetowych na przyszłość dzięki interfejsowi Google Fonts CSS API
Zespół Google Fonts przyczynia się też do tworzenia nowych standardów W3C, które wprowadzają innowacje w technologiach czcionek internetowych, takich jak WOFF2. Jednym z obecnie projektów jest przyrostowe przenoszenie czcionek, które umożliwia użytkownikom ładowanie bardzo małych fragmentów plików czcionek używanych na ekranie i strumieniowanie w pozostałych na żądanie, co znacznie przekracza zakres Unicode. Gdy używasz naszego interfejsu API czcionek internetowych, użytkownicy otrzymują te ulepszenia technologii przesyłania czcionek, gdy staną się one dostępne w ich przeglądarce.
To właśnie jest piękne w interfejsie API czcionek: użytkownicy mogą korzystać z każdej nowej funkcji bez wprowadzania zmian w witrynie. Nowy format czcionki internetowej? Żaden problem. Czy obsługa nowej przeglądarki lub systemu operacyjnego? Zajmiemy się tym. Dzięki temu nie musisz zajmować się konserwacją czcionek internetowych, tylko możesz skupić się na użytkownikach i treściach.
Czcionki zmienne obsługują wbudowane
Czcionki zmienne to pliki czcionek, które mogą przechowywać różne warianty projektu na wielu osiach. Nowa wersja interfejsu API czcionek Google obsługuje je. Dodanie dodatkowej osi zmienności daje nową elastyczność w przypadku czcionki, ale może prawie podwoić rozmiar pliku czcionki.
Jeśli żądanie do interfejsu CSS API jest bardziej szczegółowe, interfejs Google Fonts CSS API może wyświetlać tylko część czcionki zmiennej potrzebnej witrynie, aby zmniejszyć rozmiar pobieranych plików. Umożliwia to używanie czcionek zmiennych w internecie bez wydłużania czasu wczytywania stron. Możesz to zrobić, podając pojedynczą wartość na osi lub zakres; możesz nawet określić wiele osi i wiele rodzin czcionek w jednym żądaniu. Interfejs API jest elastyczny, aby sprostać Twoim potrzebom.
Prosta implementacja i optymalizacja
Interfejs Google Fonts CSS API pomaga dostarczać czcionki, które:
- większa zgodność z przeglądarkami internetowymi.
- Jak najmniejsza.
- Szybko dostarczone.
- Łatwiej w nim pracować.
Więcej informacji o Google Fonts znajdziesz na stronie fonts.google.com. Aby dowiedzieć się więcej o interfejsie CSS API, zapoznaj się z dokumentacją interfejsu API.
Podziękowania
Baner powitalny autorstwa leesehee.