Określanie zachowania czcionki internetowej podczas jej wczytywania może być ważną metodą dostrajania wydajności. Nowy deskryptor font-display dla @font-face pozwala deweloperom zdecydować, jak będą renderowane (lub zastępcze) czcionki internetowe w zależności od tego, jak długo trwa ich wczytywanie.
Obecne różnice w renderowaniu czcionek
Dzięki czcionce Web Fonts deweloperzy mogą w swoich projektach stosować rozbudowaną typografię, przy czym jeśli użytkownik nie ma jeszcze kroju, przeglądarka musi ją pobrać. Niestabilne sieci mogą działać niestabilnie, dlatego czas pobierania może niekorzystnie wpłynąć na wrażenia użytkownika. W końcu nikt nie zainteresuje się, jak ładny jest Twój tekst, jeśli pojawi się on zbyt długo.
Aby ograniczyć ryzyko powolnego pobierania czcionek, większość przeglądarek stosuje limit czasu, po którym używana jest czcionka zastępcza. Jest to przydatna technika, ale niestety przeglądarki mogą różnić się w rzeczywistości.
| Przeglądarka | Czas oczekiwania | Wycofanie | Swap |
|---|---|---|---|
| Chrome w wersji 35 lub nowszej | 3 sekundy | Tak | Tak |
| Opera | 3 sekundy | Tak | Tak |
| Firefox | 3 sekundy | Tak | Tak |
| Internet Explorer | 0 sekund | Tak | Tak |
| Safari | Bez czasu oczekiwania | Nie dotyczy | Nie dotyczy |
- W Chrome i Firefoksie czas oczekiwania wynosi 3 sekundy, po którym tekst jest wyświetlany z użyciem czcionki zastępczej. Jeśli czcionka uda się pobrać, w końcu następuje zamiana, a tekst jest ponownie renderowany z użyciem tej czcionki.
- Limit czasu przeglądarki Internet Explorer wynosi zero sekund, co skutkuje natychmiastowym renderowaniem tekstu. Jeśli żądana czcionka nie jest jeszcze dostępna, używana jest wartość zastępcza – tekst jest renderowany ponownie później, gdy żądana czcionka stanie się dostępna.
- Przeglądarka Safari nie zachowuje czasu oczekiwania (lub nie przekracza podstawowego limitu czasu sieci).
Co gorsza, deweloperzy mają ograniczoną kontrolę nad tym, jak te reguły będą wpływać na ich zastosowanie. Programista nastawiony na wydajność może preferować szybsze działanie początkowe, w którym używa czcionki zastępczej. Przy kolejnych wizytach w witrynie korzystaj z lepszej czcionki internetowej tylko po zdobyciu pliku. Korzystając z narzędzi takich jak Font Wczytuję API, można zastąpić niektóre domyślne ustawienia przeglądarki i uzyskać większą wydajność, ale wiąże się to z koniecznością zapisania nieprostych ilości kodu JavaScript, który musi być wbudowany na stronie lub wysyłany z pliku zewnętrznego, co wiąże się z dodatkowym czasem oczekiwania HTTP.
Aby rozwiązać ten problem, grupa robocza ds. usług porównywania cen zaproponowała nowy deskryptor @font-face (font-display) oraz odpowiednią właściwość do kontrolowania sposobu renderowania czcionki do pobrania przed jej pełnym wczytaniem.
Osie czasu pobierania czcionek
Podobnie jak w przypadku obecnych ustawień limitu czasu korzystania z czcionki, które są stosowane dzisiaj w niektórych przeglądarkach, funkcja font-display dzieli czas pobierania czcionki na 3 główne okresy.
- Pierwsza to okres bloku czcionek. W tym czasie, gdy krój czcionki nie zostanie wczytany, każdy element, który próbuje z niej skorzystać, musi zostać wyrenderowany przy użyciu niewidocznej zastępczej kroju czcionki. Jeśli krój czcionki uda się wczytać w okresie blokowania, będzie używany normalnie.
- Okres zamiany czcionek ma miejsce bezpośrednio po okresie bloku czcionki. W tym okresie, jeśli krój czcionki nie zostanie wczytany, każdy element, który próbuje z niej skorzystać, będzie musiał wyrenderować się z zastępczą krocją czcionki. Jeśli krój czcionki uda się wczytać w okresie wymiany, będzie używany normalnie.
- Okres awarii czcionek następuje natychmiast po okresie zamiany czcionek. Jeśli w momencie rozpoczęcia tego okresu krój czcionki nie zostanie jeszcze wczytany, zostanie oznaczony jako nieudany ładowanie, co spowoduje normalne działanie zastępczej czcionki. W przeciwnym razie krój czcionki będzie używany normalnie.
Jeśli zrozumiesz te przedziały, za pomocą font-display możesz określić, jak powinna wyglądać czcionka w zależności od tego, czy została pobrana.
Który interfejs Font-Display jest dla Ciebie odpowiedni?
Aby korzystać z deskryptora font-display, dodaj go w regułach @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
Filtr auto korzysta ze strategii wyświetlania czcionek używanej przez klienta użytkownika. Większość przeglądarek ma obecnie domyślną strategię podobną do blokowania.
blok
block powoduje ustawienie kroju czcionki na krótki okres bloku (w większości przypadków zalecamy 3 s) i nieskończoną zamianę. Inaczej mówiąc, przeglądarka rysuje na początku tekst „niewidoczny”, jeśli czcionka nie jest załadowana, ale po załadowaniu zmienia jej krój. W tym celu przeglądarka tworzy anonimową krój czcionki z danymi podobnymi do wybranej czcionki, ale niezawierającymi atramentu. Tej wartości należy używać tylko wtedy, gdy strona wymaga renderowania określonego kroju czcionki,
zamień
swap ustawia dla kroju czcionki 0-sekundowy okres bloku i okres nieskończonego zamiany. Oznacza to, że jeśli krój czcionki nie zostanie wczytany, przeglądarka natychmiast rysuje tekst z wartością zastępczą, ale zaraz po załadowaniu go zamienia. Podobnie jak w przypadku ustawienia block, ta wartość powinna być używana tylko wtedy, gdy renderowanie tekstu przy użyciu określonej czcionki jest ważne dla strony, jednak renderowanie przy użyciu dowolnej czcionki powoduje wyświetlenie prawidłowego komunikatu. Tekst logo dobrze nadaje się do zamiany, ponieważ wyświetlenie nazwy firmy w dopuszczalnej wartości zastępczej spowoduje wyświetlenie komunikatu, ale w końcu użyjesz oficjalnego kroju czcionki.
kreacja zastępcza
Wartość zastępcza zapewnia bardzo krótki okres bloku (w większości przypadków zalecamy 100 ms lub mniej) i krótki okres zamiany (w większości przypadków zalecane są 3 sekundy). Innymi słowy, krój czcionki jest na początku renderowany z zastępczą wartością zastępczą, jeśli nie zostanie wczytana, ale po jej wczytaniu jest ona zamieniana. Jeśli jednak upłynie za dużo czasu, kreacja zastępcza będzie używana do końca okresu przechowywania strony. Kreacja zastępcza to dobre rozwiązanie w przypadku elementów takich jak tekst główny, które użytkownicy powinni jak najszybciej zacząć czytać, aby nie zakłócać korzystania z usługi przez przesunięcie tekstu w miarę wczytywania nowej czcionki.
opcjonalnie
Atrybut opcjonalny ustawia dla kroju czcionki bardzo krótki okres bloku (w większości przypadków zalecamy 100 ms lub mniej) oraz zero sekund zmiany. Podobnie jak w przypadku kreacji zastępczych, taka opcja jest przydatna, gdy pobieranie czcionki jest przyjemne, ale nie jest niezbędne dla działania strony. Wartość optional pozostawia to przeglądarce do podjęcia decyzji o rozpoczęciu pobierania czcionki (może ona nie robić tego samodzielnie lub zrobić to z niskim priorytetem w zależności od tego, co według niej będzie najlepsze dla użytkownika). Może to być przydatne w sytuacjach, gdy użytkownik ma słabe połączenie i ściąganie czcionki może nie być najlepszym sposobem korzystania z zasobów.
Obsługiwane przeglądarki
W Chrome 49 w wersji na komputery font-display znajduje się obecnie za flagą Eksperymentalnych funkcji platformy internetowej, natomiast w Operze i Operze na Androida jest dostępna.
Demonstracyjny
Obejrzyj przykład, żeby wypróbować font-display. Dla programistów, którym zależy na wydajności, może to być
jeszcze jedno przydatny pasek narzędzi.