Logo David Burdelak
Słownik · Web development

Co to jest FOUT?

Ostatnia aktualizacja:

FOUT (Flash of Unstyled Text) to efekt, w którym strona najpierw wyświetla tekst domyślną czcionką systemową, a po pobraniu czcionki internetowej podmienia go na docelowy krój. Użytkownik widzi treść od razu, ale może zauważyć skok wyglądu i położenia tekstu.

Czym FOUT różni się od FOIT?

Przy FOIT tekst jest niewidoczny do chwili pobrania czcionki, a przy FOUT widoczny od początku, tylko w innym kroju. Większość specjalistów woli FOUT, bo nie ukrywa treści, co jest korzystniejsze dla szybkości odbioru i dostępności.

Jak złagodzić skutki?

Dobierz czcionkę zastępczą o zbliżonych proporcjach i użyj właściwości size-adjust, ascent-override oraz descent-override w @font-face, aby rozmiar tekstu był podobny. Dzięki temu podmiana powoduje mniejsze przesunięcia układu.

Wpływ na CLS

Podmiana czcionki o innych wymiarach może przesunąć akapity i zwiększyć wskaźnik CLS. Preload kluczowej czcionki i dopasowanie fallbacku skracają okres, w którym efekt jest widoczny.

Zobacz w praktyce

Powiązane pojęcia

Wszystkie hasła z kategorii Web development