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ą optymalizacji wydajności. Nowy opis wyświetlania czcionek w @font-face pozwala deweloperom określić, jak mają być renderowane (lub zastępowane) czcionki internetowe, w zależności od czasu ich wczytywania.

Różnice w renderowaniu czcionek

WebFonts umożliwiają deweloperom stosowanie bogatej typografii w ich projektach, ale jeśli użytkownik nie ma jeszcze czcionki, przeglądarka musi poświęcić trochę czasu na jej pobranie. Sieci mogą być niestabilne, dlatego czas pobierania może negatywnie wpłynąć na wrażenia użytkownika. W końcu nikt nie zwraca uwagi na to, jak ładny jest tekst, jeśli jego wyświetlenie zajmuje nieproporcjonalnie dużo czasu.

Aby zmniejszyć ryzyko związane z powolnym pobieraniem czcionek, większość przeglądarek stosuje limit czasu, po którego upływie używana jest czcionka zastępcza. Jest to przydatna technika, ale przeglądarki różnią się pod względem implementacji.

• Chrome i Firefox mają 3-sekundowy limit czasu, po upływie którego tekst jest wyświetlany za pomocą czcionki zastępczej. Jeśli czcionka zostanie pobrana, nastąpi zamiana i tekst zostanie ponownie wyrenderowany za pomocą wybranej czcionki.
• Internet Explorer ma limit czasu 0 sekund, co powoduje natychmiastowe renderowanie tekstu. Jeśli żądana czcionka nie jest jeszcze dostępna, używana jest czcionka zastępcza, a tekst jest ponownie renderowany, gdy żądana czcionka stanie się dostępna.
• Safari nie ma ustawionego limitu czasu (lub przynajmniej nie ma go poza domyślnym limitem czasu sieci).

Co gorsza, deweloperzy mają ograniczoną kontrolę nad tym, jak te zasady wpłyną na ich aplikacje. Deweloper dbający o wydajność może preferować szybsze działanie początkowe, które wykorzystuje czcionkę zastępczą, a tylko podczas kolejnych wizyt, gdy czcionka będzie już pobrana, korzystać z ładniejszej czcionki internetowej. Za pomocą narzędzi takich jak interfejs Font Loading API można zastąpić niektóre domyślne zachowania przeglądarki i osiągnąć lepsze wyniki, ale wymaga to napisania sporej ilości kodu JavaScript, który następnie trzeba wbudować w stronie lub zażądać z pliku zewnętrznego, co spowoduje dodatkową latencję HTTP.

Aby zaradzić tej sytuacji, grupa robocza CSS zaproponowała nowy deskryptor @font-face, font-display, oraz odpowiednią właściwość do kontrolowania renderowania czcionek do pobrania przed ich pełnym załadowaniem.

Czas pobierania czcionek

Podobnie jak w przypadku obecnych zachowań dotyczących limitu czasu pobierania czcionek, które niektóre przeglądarki stosują obecnie, font-display dzieli czas trwania pobierania czcionek na 3 główne okresy.

1. Pierwszy okres to okres bloku czcionki. Jeśli w tym czasie nie uda się załadować czcionki, każdy element, który próbuje jej użyć, musi zamiast tego wyświetlić niewidoczną czcionkę zastępczą. Jeśli czcionka zostanie wczytana w okresie blokady, będzie używana normalnie.
2. Okres wymiany czcionek następuje bezpośrednio po okresie blokowania czcionek. W tym czasie, jeśli czcionka nie zostanie załadowana, każdy element, który próbuje jej użyć, musi zostać wyświetlony z użyciem czcionki zapasowej. Jeśli czcionka zostanie pomyślnie załadowana w okresie wymiany, będzie używana normalnie.
3. Okres awarii czcionek następuje bezpośrednio po okresie wymiany czcionek. Jeśli w tym czasie czcionka nie zostanie jeszcze załadowana, zostanie oznaczona jako nieudane wczytanie, co spowoduje normalne użycie czcionki zastępczej. W przeciwnym razie czcionka jest używana normalnie.

Dzięki znajomości tych okresów możesz za pomocą font-display zdecydować, jak ma być renderowany Twój font w zależności od tego, czy został on pobrany i kiedy.

Który wyświetlacz czcionek jest dla Ciebie odpowiedni?

Aby korzystać z określenia font-display, dodaj je do at-rules:@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 ten zakres wartości: auto | block | swap | fallback | optional.

auto

auto używa dowolnej strategii wyświetlania czcionek używanej przez user-agenta. Większość przeglądarek ma obecnie domyślną strategię podobną do blokowania.

blok

block powoduje krótki okres blokowania czcionki (w większości przypadków zalecane są 3 sekundy) oraz nieograniczony okres wymiany. Innymi słowy, jeśli czcionka nie jest załadowana, przeglądarka najpierw wyświetla „niewidoczny” tekst, ale zastępuje go czcionką, gdy tylko zostanie ona załadowana. W tym celu przeglądarka tworzy anonimowy krój czcionki z danymi podobnymi do wybranego czcionki, ale bez „tuszu” w żadnym z glifów. Tej wartości należy używać tylko wtedy, gdy renderowanie tekstu w danym kroju pisma jest wymagane, aby strona była użyteczna.

swap

swap nadaje czcionce okres blokowania równy 0 s i nieskończony okres przełączania. Oznacza to, że przeglądarka od razu wyświetla tekst z użyciem czcionki zastępczej, ale zastępuje ją czcionką domyślną, gdy tylko się ona załaduje. Podobnie jak w przypadku atrybutu block, tej wartości należy używać tylko wtedy, gdy renderowanie tekstu w określonej czcionce jest ważne dla strony, ale renderowanie w dowolnej czcionce nadal powoduje prawidłowe wyświetlanie wiadomości. Tekst logo jest dobrym kandydatem do zastąpienia, ponieważ wyświetlenie nazwy firmy za pomocą odpowiedniej czcionki zastępczej pozwoli przekazać wiadomość, ale ostatecznie należy użyć oficjalnej czcionki.

kreacja zastępcza

Zastępczy – w tym przypadku okres blokowania jest bardzo krótki (w większości przypadków zaleca się 100 ms) i krótki okres przełączania (w większości przypadków zaleca się 3 sekundy). Innymi słowy, jeśli czcionka nie jest załadowana, najpierw jest renderowana z zastępczą, ale zastępcza ona ją od razu po załadowaniu. Jeśli jednak upłynie zbyt dużo czasu, wartość zastępcza będzie używana do końca istnienia strony. Wartość zastępcza jest odpowiednia w przypadku takich elementów, jak tekst, w przypadku których chcesz, aby użytkownik zaczął czytać jak najszybciej, a nie chcesz zakłócać jego wrażeń przez przemieszczanie tekstu podczas wczytywania nowej czcionki.

opcjonalnie

Opcjonalny parametr, który powoduje, że krój czcionki ma bardzo krótki okres blokowania (w większości przypadków zalecamy 100 ms lub mniej) i zerowy okres przełączania. Podobnie jak w przypadku opcji zapasowej jest to dobry wybór, gdy pobieranie czcionki jest „fajną opcją”, ale nie jest kluczowe dla użytkownika. Wartość opcjonalna pozostawia decyzję o zainicjowaniu pobierania czcionki przeglądarce. Może ona zdecydować, że nie będzie tego robić, lub może pobrać czcionkę z niskim priorytetem w zależności od tego, co według niej będzie najlepsze dla użytkownika. Może to być przydatne w sytuacjach, gdy użytkownik ma słabe połączenie i pobieranie czcionek może nie być najlepszym wykorzystaniem zasobów.

Obsługa przeglądarek

font-display jest obecnie dostępna pod flagą Eksperymentalne funkcje platformy internetowej w Chrome 49 na komputery. Jest też dostępna w Opera i Opera na Androida.

Prezentacja

Aby wypróbować font-display, zapoznaj się z przykładem. Dla programistów, którym zależy na wydajności, może to być kolejne przydatne narzędzie.