Znalazłeś docelowy font do swojej strony internetowej. Idealnie współgra z projektem, jest czytelny i masz na niego licencję. Z radością dodajesz font do styli, podając link z którego przeglądarka może go pobrać i używasz we wszystkich tekstach.
A czy zastanawiałeś się kiedyś jak dedykowany font wpływa na to, co widzi użytkownik, gdy pierwszy raz odwiedza twoją stronę? Co wyświetla przeglądarka, gdy pobrała już html, ale nie ściągnęła jeszcze zasobów? Jak wygląda treść bez docelowych fontów?
Są dwie strategie, które stosują przeglądarki w tej sytuacji: wyświetlają tekst używając domyślnego fontu (FOUT) lub ukrywają go (FOIT). W momencie, gdy font zostanie pobrany, strona zostaje przerysowana z użyciem docelowych krojów.
Definiowanie kroju. Właściwość font-family
W CSS krój pisma ustawia się za pomocą właściwości font-family. Jako wartość można podać jedną lub więcej nazw krojów (rozdzielonych przecinkami). Zalecane jest by ostatnią z nazw była jedna z nazw generycznych (ang. generic names).
Przykładowa definicja font-family:
font-family: Lato, Arial, sans-serifWybór kroju
Do tekstu zastosowany może być tylko jeden krój na raz. Który? Pierwszy z listy, który będzie dostępny na urządzeniu klienta. Jeśli żaden krój nie będzie dostępny, użyty zostanie pewien krój domyślny.
Dostępność kroju
Krój jest dostępny jeśli
- jest zainstalowany w systemie użytkownika
- lub jest zdefiniowany za pomocą
font-facei został pobrany
Dopóki przeglądarka nie ściągnie pliku, nie jest on dostępny i nie może być użyty do renderowania tekstu.
Kroje domyślne
Jeśli
- właściwość font-family nie jest określona (ani odziedziczona),
- lub żaden z podanych w font-family krojów nie jest dostępny
przeglądarka użyje domyślnego fontu. Specyfikacja nie precyzuje, jaki to będzie font. Wszystko zależy od przeglądarki i/lub systemu, na którym jest zainstalowana.
Tak samo od przeglądarki zależy, jakiego fontu użyje, gdy natrafi na nazwę generyczną.
Flash of Unstyled Text – FOUT
Pierwsza historycznie strategia renderowania tekstu to FOUT – ang. Flash of Unstyled Text, czyli „mignięcie nieostylowanego tekstu”. W tym przypadku jeśli w momencie rysowania strony żądany font nie jest jeszcze dostępny, to przeglądarka renderuje tekst używając domyślnego kroju. Gdy plik zostanie w końcu ściągnięty strona zostaje przerysowana z użyciem docelowego fontu.
Użytkownik od razu ma dostęp do treści. Wygląd strony z domyślnym fontem może być podobny do wersji z docelowym, jeśli kroje są podobne. Jeśli jednak znacząco się różnią np. szerokością lub grubością, to przy przerysowaniu strona „skacze” – zmienia się układ elementów, wysokość wierszy i ich liczba. Może się zdarzyć, że użytkownikowi zniknie z oczu tekst, który właśnie czytał, gdyż przesunie się znacząco względem poprzedniej pozycji.
Flash of Invisible Text – FOIT
FOIT – ang. Flash of Invisible Text, czyli „mignięcie niewidocznego tekstu”. W tej strategii przeglądarka ustawia tekst na niewidzialny, póki plik z fontem nie zostanie ściągnięty. Na stronie jest puste miejsce, w którym treść ma się pojawić. Tekst staje się widoczny po załadowaniu fontu (lub upłynięciu zadanego czasu – warunek na wypadek, gdyby pobranie fontu miało się nigdy nie udać).
Oznacza to, że początkowo strona jest dla użytkownika bezużyteczna i nie może z niej korzystać. Za to gdy już treść się pojawi, jej układ pozostanie niezmieniony. Chyba, że doładują się jeszcze jakieś obrazki itp.
Najlepsze rozwiązanie
To, który sposób radzenia sobie z pobieranymi fontami jest najkorzystniejszy, zależy od tego kiedy i kogo spytać – co ładnie podsumował Jonathan Suh: „Cóż za ironia, wtedy walczyłem przeciwko FOUT, teraz gdy walczę przeciw FOIT, to FOUT okazuje się nie być takie złe” [4].
Strategie używane przez przeglądarki zmieniają się. Niezależnie od tego, która jest stosowana, to co możemy i powinniśmy zrobić to przyspieszyć ładowanie zasobów, w tym plików z fontami. Przykładowe porady jak to zrobić znajdziesz u Paula Irisha [5] albo Zacha Leathermana [7]. Ten ostatni jest też autorem rozwiązania FOFT.
Flash of Faux Text – FOFT
Flash of Faux Text, czyli „mignięcie imitacji tekstu”. Nie jest to strategia stosowana przez przeglądarki, ale pomysł Zacha Leathermana na zmniejszenie negatywnego wpływu migania na odbiorcę [6].
FOFT polega na podzieleniu używanych plików fontów na kluczowe (critical – krytyczne) i dodatkowe (dereffered – odłożone, opóźnione). Skupiamy się na tym, by jak najszybciej zostały ściągnięte te pierwsze, najważniejsze.
Jak podzielić fonty na wspomniane dwie grupy? Jako kluczowy wybieramy krój w odmianie używanej w większości tekstu, czyli najczęściej roman – standardowej grubości, bez pochylenia (font-weight: normal i font-style: normal). Może wręcz być odchudzony do samych znaków alfanumerycznych, bez znaków interpunkcyjnych itp [10]. Ten font bowiem najbardziej wpływa na układ strony. W dodatku mając podstawowy font przeglądarka sama wygeneruje niektóre potrzebne odmiany, jak pochylenie czy pogrubienie (ang font-synthesis) [11]. Te wygenerowane odmiany to właśnie faux text – imitacja, zastępująca chwilowo starannie zaprojektowane odmiany.
Wszystkie pozostałe odmiany to fonty dodatkowe. Później, gdy zostaną ściągnięte i strona zostanie przerysowana, różnica w wyglądzie i zmiany układu będą minimalne.
Źródła
Font-family
- https://css-tricks.com/almanac/properties/f/font-family/
- https://www.w3.org/TR/css-fonts-3/#font-family-prop
Ładowanie fontów – FOUT, FOIT, FOFT
- https://css-tricks.com/fout-foit-foft/
- https://css-tricks.com/fout-foit-foft/#comment-1593574
- https://www.paulirish.com/2009/fighting-the-font-face-fout/
- https://www.zachleat.com/web/foft/
- https://www.zachleat.com/web/23-minutes/
- https://www.zachleat.com/web/comprehensive-webfonts/
- https://webkit.org/blog/66/the-fouc-problem/
- https://www.mercuryworks.com/foit-fout-and-perceived-performance-2/
Font-synthesis – generowanie odmian fontu przez przeglądarki
matomości 