Activity

Kiedy przeglądarka renderuje tekst na stronie, nie zawsze korzysta z pierwszej czcionki zdefiniowanej w stylach. Jeśli pierwsza rodzina nie jest dostępna w systemie użytkownika lub nie zawiera danego znaku, silnik przechodzi do kolejnej pozycji, aż znajdzie pasującą. Aby sprawdzić, co faktycznie widzi odbiorca, otwórz narzędzia deweloperskie w przeglądarce i zakładkę inspekcji elementów. Kliknij prawym przyciskiem myszy na interesujący cię fragment tekstu i wybierz opcję zbadania elementu. W panelu stylów znajdź sekcję typografii. Zwykle zobaczysz tam listę rodzin oddzielonych przecinkami, czyli stos czcionek. Obok lub pod tą listą pojawia się informacja o czcionce renderowanej, często oznaczona jako “computed” lub “used”. To najszybsza metoda, by ustalić, która pozycja z listy została rzeczywiście zastosowana. Pamiętaj, że panel pokazuje stan dla konkretnego elementu, więc sprawdź kilka różnych fragmentów, jeśli podejrzewasz, że różne znaki mogą pochodzić z różnych rodzin.

Drugą skuteczną techniką jest świadome testowanie z użyciem nietypowych znaków. Wpisz w edytowanym dokumencie lub w konsoli przeglądarki znaki spoza podstawowego zestawu łacińskiego, na przykład greckie, cyrylickie, a także symbole matematyczne czy emoji. Jeśli twoja pierwsza czcionka ich nie zawiera, przeglądarka sięgnie głębiej w stos czcionek. Wtedy w panelu inspekcji zobaczysz, że renderowana rodzina się zmieniła. Możesz też tymczasowo wyłączyć w narzędziach deweloperskich pojedyncze deklaracje, odhaczając je w panelu stylów. Obserwuj, jak zmienia się wygląd tekstu i która nazwa pojawia się jako aktywna. To pozwala wychwycić sytuacje, w których system podmienia czcionkę bez twojej wiedzy, na przykład gdy użytkownik ma zainstalowaną inną wersję lub gdy nazwa jest błędnie zapisana. Warto przy tym sprawdzić, czy nie działają reguły nadrzędne, takie jak ważność deklaracji, które mogą omijać twój początkowy wybór.

Trzecia metoda opiera się na skryptowym porównaniu szerokości tekstu. W konsoli przeglądarki możesz stworzyć element z próbką znaków, ustawić mu kolejno różne rodziny czcionek i mierzyć jego szerokość. Jeśli szerokość dla twojej pierwszej propozycji różni się od szerokości dla czcionki zapasowej, to ten poradnik , że pierwsza rodzina nie została użyta. To przydatne zwłaszcza wtedy, gdy chcesz zweryfikować cały stos czcionek zbiorczo, bez ręcznego przeglądania każdej deklaracji. Pamiętaj jednak, że wynik może zależeć od rozmiaru tekstu i wygładzania, więc testuj na tej samej próbce i w tych samych warunkach. Łącząc inspekcję stylów, testy znaków i pomiar szerokości, zyskujesz pewność, że wiesz, co naprawdę wyświetla się na ekranie, i możesz świadomie poprawić definicję czcionek, zanim trafi ona do odbiorców.