Kontrolowanie wydajności czcionek za pomocą funkcji font-display

Rob Dodson

Określanie zachowania czcionki internetowej podczas jej wczytywania może być ważną techniką dostrajania wydajności. Nowy deskryptor font-display dla interfejsu @font-face pozwala programistom określić sposób renderowania (lub kreacji zastępczych) ich czcionek internetowych, w zależności od tego, jak długo się ładują.

Różnice w renderowaniu czcionek

Czcionki internetowe pozwalają programistom uwzględniać w swoich projektach obszerną typografię, przy czym jeśli użytkownik nie ma jeszcze kroju czcionki, przeglądarka musi poświęcić trochę czasu na jej pobranie. Ponieważ sieć bywa niestabilna, taki czas pobierania może negatywnie wpłynąć na wrażenia użytkownika. Przecież nikt nie będzie wiedział, jak ładny jest Twój tekst, jeśli jego wyświetlenie zajmie zbyt dużo czasu.

Aby ograniczyć ryzyko powolnego pobierania czcionek, większość przeglądarek stosuje limit czasu, po którym czcionka zastępcza jest używana. To przydatna technika, ale przeglądarki różnią się w rzeczywistości.

• Chrome i Firefox mają trzysekundowy czas oczekiwania, po którym tekst wyświetla się z użyciem czcionki zastępczej. Jeśli czcionka się pobierze, w końcu nastąpi zamiana i tekst jest ponownie renderowany z użyciem odpowiedniej czcionki.
• Internet Explorer ma 0-sekundowy czas oczekiwania, co powoduje natychmiastowe renderowanie tekstu. Jeśli żądana czcionka nie jest jeszcze dostępna, używana jest kreacja zastępcza, a tekst jest ponownie renderowany po udostępnieniu żądanej czcionki.
• Safari nie działa w związku z limitem czasu oczekiwania (lub przynajmniej w ogóle poza bazowym limitem czasu sieci).

Co gorsza, deweloperzy mają ograniczoną kontrolę nad tym, jak te reguły wpłyną na ich zastosowanie. Deweloper nastawiony na wydajność może preferować szybsze działanie strony z czcionką zastępczą i używać ładniejszej czcionki internetowej tylko wtedy, gdy już ją pobierzesz. Użycie takich narzędzi jak Font load API pozwala zastąpić niektóre domyślne działania przeglądarki i zwiększyć wydajność przeglądarki, ale wiąże się to z kosztem zapisywania niezrozumiałych ilości kodu JavaScript, który trzeba następnie umieścić na stronie lub zażądać z pliku zewnętrznego, co powoduje dodatkowe opóźnienia HTTP.

Aby rozwiązać tę sytuację, grupa robocza ds. usług porównywania cen zaproponowała nowy deskryptor @font-face (font-display) i odpowiednią właściwość do kontrolowania sposobu renderowania czcionki do pobrania przed jej pełnym wczytaniem.

Osie czasu pobierania czcionek

Podobnie jak w przypadku dotychczasowych reguł dotyczących czasu oczekiwania czcionek, które są stosowane w niektórych przeglądarkach, funkcja font-display dzieli czas pobierania czcionki na 3 główne okresy.

1. Pierwszy okres to okres bloku czcionek. Jeśli w tym czasie twarz czcionki nie zostanie wczytana, każdy element próbujący jej użyć musi renderować się z niewidoczną zastępczej płaszczyzną czcionki. Jeśli krój czcionki wczyta się w okresie blokowania, będzie używana normalnie.
2. Okres zamiany czcionek następuje bezpośrednio po okresie blokowania czcionek. Jeśli w tym czasie krój czcionki nie zostanie wczytany, każdy element próbujący jej użyć musi być renderowany z zastępczą kropką czcionki. Jeśli w trakcie okresu wymiany twarz czcionki załaduje się prawidłowo, będzie używana w zwykły sposób.
3. Okres błędu czcionki następuje bezpośrednio po okresie zamiany czcionek. Jeśli czcionka nie zostanie wczytana po rozpoczęciu tego okresu, zostanie oznaczona jako nieudana próba, co spowoduje normalne działanie czcionki w zastępstwie. W przeciwnym razie czcionka będzie używana normalnie.

Zrozumienie tych okresów oznacza, że za pomocą font-display możesz zdecydować, jak czcionka ma się wyświetlać w zależności od tego, czy została pobrana.

Która czcionka jest dla Ciebie odpowiednia?

Aby korzystać z deskryptora font-display, dodaj go do reguł @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display obsługuje obecnie następujący zakres wartości: auto | block | swap | fallback | optional.

automatycznie

auto – używa dowolnej strategii wyświetlania czcionki stosowaną przez klienta użytkownika. Większość przeglądarek ma obecnie domyślną strategię podobną do strategii blokowania.

blok

block zapewnia krótki okres bloku (zalecamy 3 s) i nieskończony okres wymiany. Inaczej mówiąc, jeśli czcionka nie została wczytana, przeglądarka najpierw rysuje „niewidoczny” tekst, ale zmienia kropkę czcionki zaraz po jej wczytaniu. W tym celu przeglądarka tworzy anonimową płaszczyznę czcionki ze wskaźnikami podobnymi do wybranej czcionki, ale wszystkie glify nie zawierają tekstu „atrament”. Tej wartości należy używać tylko wtedy, gdy wymagane jest renderowanie tekstu określonego kroju czcionki strony.

zamień

zamień powoduje nadanie kroju czcionki 0-sekundowego okresu bloku i nieskończonego okresu zamiany. Oznacza to, że jeśli twarz czcionki nie została wczytana, przeglądarka natychmiast rysuje tekst z użyciem kreacji zastępczej, ale zamienia ją natychmiast po załadowaniu. Podobnie jak w przypadku właściwości block, ta wartość powinna być używana tylko wtedy, gdy renderowanie tekstu przy użyciu konkretnej czcionki ma znaczenie na stronie, ale renderowanie dowolnej czcionki nadal zwraca poprawny komunikat. Tekst logo dobrze nadaje się do zamiany, ponieważ użycie w rozsądny sposób nazwy firmy w rozsądny sposób sprawi, że komunikat będzie się lepiej widoczny, ale ostatecznie będzie używany oficjalny krój pisma.

kreacja zastępcza

kreacja zastępcza ustawia bardzo krótki okres blokady (w większości przypadków zaleca się 100 ms) i krótki okres wymiany (w większości przypadków zalecamy 3 sekundy). Inaczej mówiąc, czcionka jest renderowana z użyciem kreacji zastępczej, jeśli nie została załadowana, i zastępowana od razu po jej wczytaniu. Jeśli jednak upłynie zbyt dużo czasu, kreacja zastępcza będzie używana do końca cyklu życia strony. Kreacja zastępcza sprawdza się w przypadku treści takich jak tekst główny, w których użytkownik ma zacząć jak najszybciej czytać i nie chce zakłócać korzystania z usługi przez przesuwanie tekstu po wczytaniu się nowej czcionki.

opcjonalnie

opcjonalny ustawia bardzo krótki okres bloku (zalecany w większości przypadków 100 ms) i okres zmiany 0 sekund. Podobnie jak w przypadku kreacji zastępczych ta opcja jest dobrym rozwiązaniem, gdy pobieranie czcionki jest bardziej przydatne, ale nie ma znaczenia dla wygody użytkownika. Wartość opcjonalna decyduje o tym, czy rozpocząć pobieranie czcionki, a potem może ona nie wykonywać tego działania lub może mieć niski priorytet w zależności od tego, co uzna za najlepsze dla użytkownika. Jest to przydatne w sytuacjach, gdy użytkownik ma słabe połączenie, a pobranie czcionki może nie być najlepszym sposobem wykorzystania zasobów.

Obsługiwane przeglądarki

font-display znajduje się obecnie za flagą eksperymentalnych funkcji platformy internetowej w Chrome 49 na komputery i jest dostępny w wersjach Opera i Opera na Androida.

Pokaz

Wypróbuj przykład, aby wypróbować usługę font-display. Dla deweloperów nastawionych na wydajność może być jeszcze bardziej przydatne narzędzie.