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

Rob Dodson

Sposób działania czcionki internetowej podczas jej wczytywania ważną technikę dostrajania wydajności. Nowy deskryptor font-display dla @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 będą się one wczytywać.

Dzisiejsze różnice w renderowaniu czcionek

Czcionki internetowe dają programistom możliwość dodawania bogatej typografii w przy tworzeniu projektów. Jeśli użytkownik nie ma jeszcze musi minąć trochę czasu, zanim przeglądarka pobierze ten krój pisma. Ponieważ sieci mogą niepewny czas pobierania może negatywnie wpłynąć na i uzyskiwanie dodatkowych informacji. Przecież nikt nie będzie wiedział, jak ładny jest Twój tekst, ich wyświetlenie zajmuje mnóstwo czasu!

Aby ograniczyć ryzyko powolnego pobierania czcionek, większość przeglądarek stosuje czas oczekiwania, po którym będzie używana czcionka zastępcza. Jest to przydatna technika, ale ale różnią się od rzeczywistej implementacji.

Przeglądarka Czas oczekiwania Wycofanie Swap
Chrome 35 i nowsze wersje 3 sekundy Tak Tak
Opera 3 sekundy Tak Tak
Firefox 3 sekundy Tak Tak
Internet Explorer 0 sekund Tak Tak
Safari Bez limitu czasu Nie dotyczy Nie dotyczy
  • Chrome i Firefox mają trzysekundowy czas oczekiwania, po którym wyświetla się tekst lub użyć czcionki zastępczej. Jeśli czcionka się pobierze, i tekst jest ponownie renderowany z użyciem odpowiedniej czcionki.
  • Internet Explorer ma 0-sekundowy czas oczekiwania, co powoduje natychmiastowe wyświetlenie tekstu jak renderowanie. Jeśli żądana czcionka nie jest jeszcze dostępna, zostanie użyta kreacja zastępcza. tekst jest ponownie renderowany później, gdy żądana czcionka stanie się dostępna.
  • Safari nie zachowuje limitu czasu oczekiwania (albo przynajmniej nic poza siecią bazową). ).

Co gorsza, deweloperzy mają ograniczoną kontrolę nad tym, będą miały wpływ na ich zastosowanie. Deweloper nastawiony na wydajność może preferować aby przyspieszyć początkowe działanie, korzystając z czcionki zastępczej i wykorzystywać bardziej ładna czcionka internetowa, którą zobaczą użytkownicy po jej pobraniu. Korzystając z narzędzi takich jak Font load API, możesz zastąpić niektóre domyślnych ustawień przeglądarki i osiągać wzrost wydajności, ale pojawia się kosztów zapisu niezrozumiałych ilości kodu JavaScript, który następnie w treści strony lub żądane z pliku zewnętrznego, co wiąże się z dodatkowymi Opóźnienie HTTP.

Aby rozwiązać tę sytuację, grupa robocza ds. usług porównywania cen zaproponowała nowe deskryptor @font-face, font-display i odpowiednia właściwość dla: kontrolowania sposobu renderowania czcionki pobieranej przed jej pełnym wczytaniem.

Osie czasu pobierania czcionek

Podobnie jak w przypadku przekroczenia limitu czasu oczekiwania czcionek, które są stosowane w niektórych przeglądarkach dzisiaj font-display dzieli czas od pobrania czcionki na 3 główne, okresu.

  1. Pierwszy okres to okres bloku czcionek. Jeśli w tym okresie nie wczytano kroju czcionki, każdy element próbujący jej użyć musi zostać wyrenderowany z niewidoczną zastępczą kropką czcionki. Jeśli twarz czcionki wczyta się podczas po okresie blokady, krój czcionki będzie używany normalnie.
  2. Okres zamiany czcionek następuje bezpośrednio po okresie blokowania czcionek. W trakcie w tym okresie, jeśli krój czcionki nie został wczytany – dowolny element próbujący jej użyć musi być renderowana z użyciem zastępczej kroju czcionki. Jeśli krój czcionki w trakcie okresu wymiany krój czcionki będzie używany normalnie.
  3. Okres błędu czcionki następuje bezpośrednio po okres zmiany czcionki. Jeśli krój czcionki nie zostanie wczytany po rozpoczęciu tego okresu, zostanie oznaczony jako nieudany, co powoduje normalne działanie kreacji zastępczej. W przeciwnym razie czcionka jest używana normalnie.

Jeśli je znasz, możesz za pomocą font-display określić, jak czcionka powinna być renderowana 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.

auto

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

blok

block sprawia, że krój czcionki jest krótko blokowany (w większości przypadków zalecamy 3 s). i nieskończony okres wymiany. Innymi słowy, przeglądarka wyświetla komunikat „niewidoczny”. tekst najpierw, jeśli czcionka nie jest wczytana, ale zamienia kropkę czcionki natychmiast po jej wczytaniu . W tym celu przeglądarka tworzy anonimową płaszczyznę czcionki ze wskaźnikami podobne do wybranej czcionki, ale wszystkie glify nie zawierają tekstu „atrament”. Tej wartości należy używać tylko podczas renderowania tekstu określonego krojem czcionki jest wymagane do działania strony.

zamień

zamień powoduje nadanie kroju czcionki 0-sekundowego okresu bloku i nieskończonego okresu zamiany. Oznacza to, że przeglądarka natychmiast rysuje tekst z użyciem kreacji zastępczej, jeśli twarz czcionki nie zostanie załadowana, ale zmieni kropkę czcionki zaraz po jej wczytaniu. Podobnie jak block, należy używać tej wartości tylko wtedy, gdy renderowanie tekstu z użyciem określonej czcionki jest dla strony, ale renderowanie dowolnej czcionki będzie nadal prawidłowe. i przekazywać je dalej. Tekst logo można zamienić, ponieważ jest wyświetlany w rozsądnej sytuacji alternatywnej nazwy firmy przekaże komunikat, ale używać oficjalnej kroju czcionki.

kreacja zastępcza

kreacja zastępcza powoduje bardzo krótki okres bloku (100 ms lub mniej zalecane w większości przypadków) i krótki okres wymiany (zalecamy 3 sekundy) w większości przypadków). Innymi słowy, twarz czcionki jest renderowana z użyciem wartości zastępczej na poziomie , jeśli nie zostanie załadowana, ale czcionka jest zamieniana od razu po jej wczytaniu. Pamiętaj jednak: jeśli upłynie zbyt dużo czasu, kreacja zastępcza będzie używana do obsługi reszty strony od początku istnienia usługi. Parametr zastępczy sprawdza się w przypadku tekstu głównego, użytkownik powinien jak najszybciej zacząć czytać i nie przeszkadzać dzięki przesuwaniu tekstu w miarę załadowania nowej czcionki.

opcjonalnie

opcjonalny ustawia bardzo krótki okres bloku (100 ms zalecane w większości przypadków) i 0-sekundowy okres wymiany. Podobnie jak kreacja zastępcza, to dobry wybór, jeśli pobieranie czcionki jest bardziej „fajne” ale nie ma znaczenia dla wygody użytkownika. Wartość opcjonalna utrzymuje się w zakresie która może zdecydować, czy rozpocząć pobieranie czcionek, lub może mieć niski priorytet w zależności od tego, co według niego będzie z korzyścią dla użytkownika. Może to być przydatne w sytuacjach, w których użytkownik znajduje się słabe połączenie i pobranie czcionki mogą nie być najlepszym sposobem wykorzystania zasobów.

Obsługa przeglądarek

font-display jest obecnie za flagą Eksperymentalne funkcje platformy internetowej Chrome w wersji 49 na komputery i jest dostępna w przeglądarkach Opera i Opera na Androida.

Prezentacja

Zapoznaj się z przykładem, aby font-display uderza. Dla programistów nastawionych na wydajność na pasku narzędzi.