Zobacz w symulatorze osi czasu, co robi każda wartość font-display, a potem użyj preload i preconnect, podziel font przez unicode-range i dopasuj metryki fontu zastępczego, aby zatrzymać przesunięcia układu.
Szybkie ładowanie fontów sprowadza się do czterech ruchów: wcześnie poinformuj przeglądarkę o foncie (preconnect lub preload), wysyłaj małe pliki WOFF2 zawierające tylko potrzebne znaki, wybierz wartość font-display pasującą do tekstu i dopasuj rozmiar fontu zastępczego, aby nic nie skakało. Użyj font-display: optional, gdy najważniejsze jest uniknięcie przesunięć układu.
Wartości font-display w skrócie
Wartość
Tekst podczas ładowania
Font dociera późno
Dobre dla
Font zastępczy niemal od razu
Zawsze podmieniany
Tekst główny, który musi pojawić się od razu
Font zastępczy niemal od razu
Nie jest podmieniany; zostaje zastępczy
Najmniejsze przesunięcia układu
Font zastępczy niemal od razu
Podmieniany tylko w ciągu około 3s
Rozwiązanie pośrednie
Niewidoczny przez maksymalnie około 3s
Zawsze podmieniany
Fonty z ikonami, logotypy złożone krojem
Decyduje przeglądarka
Decyduje przeglądarka
Pozostawienie decyzji przeglądarce
Fonty to jeden z niewielu zasobów, które potrafią ukryć Twój tekst albo przestawić układ strony. Przeciągnij suwak poniżej, aby ustawić, ile czasu font potrzebuje na dotarcie, i obserwuj, co każda wartość font-display pokazuje w każdej chwili, a potem skopiuj wzorce ładowania, które utrzymują stronę stabilną.
Ustaw suwak na czas, w jakim Twój font pobiera się przy wolnym połączeniu.
Czytaj każdy wiersz: szary to niewidoczny tekst, bursztynowy to font zastępczy, niebieski to font webowy.
Zwróć uwagę, które wartości zmieniają font późno. Późna zmiana to moment, w którym widoczny tekst się przelewa.
Skopiuj fragmenty kodu dla preload, podzbiorów z unicode-range i dopasowanych fontów zastępczych.
Fonty hostowane samodzielnie: wstaw reguły @font-face bezpośrednio w head, aby przeglądarka znalazła je bez czekania na kolejny arkusz stylów.
Używaj preload tylko dla jednego lub dwóch kluczowych plików. Preload każdej grubości konkuruje z Twoimi obrazami i skryptami.
Zawsze dodawaj crossorigin do preload fontu, nawet dla plików z własnej domeny, inaczej przeglądarka pobierze plik dwa razy.
Serwuj WOFF2. Kompresuje się lepiej niż WOFF i czyta go każda aktualna przeglądarka.
Na końcu każdej listy font-family zostaw sensowną rodzinę ogólną, aby tekst nadal się wyświetlał, jeśli pobieranie się nie powiedzie.
Najczęściej zadawane pytania
Co robi font-display: swap?
Daje fontowi bardzo krótki okres blokady, który specyfikacja CSS Fonts zaleca utrzymywać na poziomie 100ms lub mniej, oraz nieskończony okres podmiany. Tekst pojawia się w foncie zastępczym niemal od razu i przełącza się na font webowy, kiedy tylko ten się załaduje.
Czy font-display: swap szkodzi CLS?
Może. Jeśli font zastępczy i font webowy mają różne szerokości lub wysokości linii, późna zmiana przesuwa tekst i treść pod nim. Napraw to przez size-adjust oraz nadpisania ascent, descent i line-gap w foncie zastępczym albo użyj optional.
Dlaczego font z preload pobiera się dwa razy?
Fonty są pobierane w anonimowym trybie CORS, więc link preload potrzebuje atrybutu crossorigin, nawet gdy plik jest w tym samym originie. Bez niego preload nie pasuje do właściwego żądania i font jest pobierany ponownie.
Czy używać preload dla Google Fonts?
Zwykle nie. web.dev ostrzega, że preload omija część własnej negocjacji treści przeglądarki, w tym unicode-range, więc możesz pobrać podzbiór, którego strona nigdy nie użyje. Zamiast tego użyj preconnect do fonts.googleapis.com i fonts.gstatic.com albo hostuj font sam i preloaduj własny plik.
Jak unicode-range oszczędza bajty?
Gdy reguła @font-face ma unicode-range, przeglądarka pobiera ten plik tylko wtedy, gdy strona używa co najmniej jednego znaku z zakresu. Podziel font na pliki łacińskie, cyrylickie lub greckie, a każdy odwiedzający pobierze tylko te pisma, które są na stronie.
Oś czasu wyświetlania fontu
Gdy tekst potrzebuje fontu, który jeszcze nie dotarł, przeglądarka przechodzi przez maksymalnie trzy okresy. W okresie blokady układa tekst z niewidocznym fontem zastępczym. W okresie podmiany pokazuje font zastępczy i przełącza go, gdy font dotrze. Potem następuje okres niepowodzenia, w którym font zastępczy zostaje na dobre.
font-display zmienia tylko długość dwóch pierwszych okresów. Wartości w symulatorze to te, które zaleca szkic CSS Fonts Level 4; przeglądarki mogą stosować nieco inne czasy.
Dlaczego późna podmiana powoduje przesunięcia układu
Nawet niewidoczny tekst zajmuje miejsce zmierzone fontem zastępczym. Gdy zastępuje go właściwy font, każda linia może stać się szersza lub węższa, więc akapity się przełamują, a wszystko poniżej się przesuwa. Ten ruch jest liczony w Cumulative Layout Shift.
Są dwa lekarstwa. Całkowicie unikaj późnej podmiany dzięki optional albo spraw, by font zastępczy zajmował tyle samo miejsca co font webowy, używając size-adjust i deskryptorów nadpisujących metryki w kroju zastępczym local().
Subsetting
Font z tysiącami glifów to marnotrawstwo dla strony, która używa stu. Narzędzia do subsettingu usuwają nieużywane znaki, zanim wgrasz plik, a unicode-range pozwala przeglądarce pominąć całe pliki, których nie potrzebuje.
Dla krótkiego tekstu ozdobnego API Google Fonts przyjmuje parametr text= i zwraca plik zawierający tylko te znaki. To wygodne przy logo albo pojedynczym nagłówku złożonym ozdobnym krojem.
Font hostowany samodzielnie z preload
Preload jednego pliku potrzebnego na pierwszym ekranie
as, type i crossorigin muszą być obecne. Reguła @font-face jest wstawiona bezpośrednio w head, więc zostaje od razu wykryta.
Podział plików przez unicode-range
Podzbiory łaciński i cyrylicki jednej rodziny
Obie reguły mają wspólną nazwę rodziny. Strona napisana wyłącznie po angielsku nigdy nie pobiera pliku cyrylickiego.
Font zastępczy o dopasowanym rozmiarze
Dopasowany lokalny font zastępczy ograniczający przesunięcia układu
Liczby są przykładowe: zmierz własny font względem zastępczego i dostrajaj je, aż oba się pokryją.
Google Fonts z preconnect i podzbiorem dla jednego nagłówka
Drugi arkusz stylów prosi tylko o litery z tekstu logo, dzięki czemu ten plik jest malutki.
Bardzo krótka blokada (100ms lub mniej), nieskończona podmiana
Bardzo krótka blokada, krótka podmiana (zalecane 3s)
Bardzo krótka blokada, brak okresu podmiany
Symulator osi czasu font-display
Widok startowy: font ładuje się 1.5 sekundy; przeciągnij suwak, aby to zmienić. Szary to niewidoczny tekst, bursztynowy font zastępczy, niebieski font webowy.
Font dociera po {n}s
Font webowy nie jest użyty przy tym wyświetleniu strony
Widoczna podmiana: tekst może się przelać
Brak widocznej podmiany
Skala: od 0 do 5 sekund. Przy optional specyfikacja pozwala przeglądarce przerwać późne pobieranie albo dokończyć je z bardzo niskim priorytetem.