Typografia ma kluczowe znaczenie dla dobrego projektu, budowania marki, czytelności i ułatwień dostępu. Czcionki internetowe umożliwiają wszystkie powyższe działania i nie tylko: tekst można zaznaczać, wyszukiwać, powiększać i wyświetlać w wysokiej rozdzielczości, co zapewnia spójne i wyraźne renderowanie tekstu niezależnie od rozmiaru i rozdzielczości ekranu. Czcionki internetowe mają kluczowe znaczenie dla dobrego projektu, wrażeń użytkowników i wydajności.
Optymalizacja czcionek internetowych jest kluczowym elementem ogólnej strategii wydajności. Każda czcionka to dodatkowy zasób, a niektóre czcionki mogą blokować renderowanie tekstu. Jednak samo używanie czcionek internetowych nie musi oznaczać, że strona będzie renderowana wolniej. Zoptymalizowane czcionki w połączeniu z przemyślaną strategią ich wczytywania i stosowania na stronie mogą natomiast pomóc zmniejszyć całkowity rozmiar strony i skrócić czas renderowania.
Anatomia czcionki internetowej
Czcionka internetowa to zbiór glifów, a każdy glif to kształt wektorowy opisujący literę lub symbol. W rezultacie o rozmiarze konkretnego pliku czcionki decydują 2 proste zmienne: złożoność ścieżek wektorowych każdego glifu i liczba glifów w danej czcionce. Na przykład Open Sans, jedna z najpopularniejszych czcionek internetowych, zawiera 897 glifów, w tym znaki łacińskie, greckie i cyrylicę.
Wybierając czcionkę, warto sprawdzić, które zestawy znaków są obsługiwane. Jeśli chcesz przetłumaczyć zawartość strony na wiele języków, użyj czcionki, która zapewni użytkownikom spójny wygląd i spójne wrażenia. Na przykład rodzina czcionek Noto od Google ma obsługiwać wszystkie języki świata. Pamiętaj jednak, że całkowity rozmiar czcionki Noto ze wszystkimi językami to ponad 1,1 GB w pliku ZIP.
Z tego posta dowiesz się, jak zmniejszyć rozmiar dostarczanych plików czcionek internetowych.
Formaty czcionek internetowych
Obecnie w internecie używane są 2 zalecane formaty kontenerów czcionek:
WOFF i WOFF 2.0 są szeroko obsługiwane przez wszystkie nowoczesne przeglądarki.
- Wyświetlaj wariant WOFF 2.0 w nowoczesnych przeglądarkach.
- Jeśli jest to absolutnie konieczne, np. gdy nadal musisz obsługiwać przeglądarkę Internet Explorer 11, użyj pliku WOFF jako wersji zapasowej.
- Możesz też nie używać czcionek internetowych w przypadku starszych przeglądarek i zastępować je czcionkami systemowymi. Może to też zwiększyć wydajność starszych urządzeń o ograniczonych zasobach.
- Formaty WOFF i WOFF 2.0 są obsługiwane przez wszystkie nowoczesne i starsze przeglądarki, które są nadal używane, więc nie musisz już korzystać z formatów EOT i TTF. Mogą one wydłużać czas pobierania czcionek internetowych.
Czcionki internetowe i kompresja
Zarówno WOFF, jak i WOFF 2.0 mają wbudowaną kompresję. Wewnętrzna kompresja WOFF 2.0 wykorzystuje Brotli i oferuje do 30% lepszą kompresję niż WOFF. Więcej informacji znajdziesz w raporcie oceny WOFF 2.0.
Warto też pamiętać, że niektóre formaty czcionek zawierają dodatkowe metadane, takie jak hinting czcionki i informacje o kerningu, które mogą nie być potrzebne na niektórych platformach, co pozwala na dalszą optymalizację rozmiaru pliku. Na przykład Google Fonts mają ponad 30 zoptymalizowanych wersji każdej czcionki i automatycznie wykrywają oraz dostarczają optymalną wersję dla każdej platformy i przeglądarki.
Zdefiniuj rodzinę czcionek za pomocą @font-face
Reguła @@font-face CSS umożliwia zdefiniowanie lokalizacji konkretnego zasobu czcionki, jej charakterystyki stylu i punktów kodowych Unicode, dla których powinna być używana. Kombinacja takich deklaracji @font-face może służyć do tworzenia „rodziny czcionek”, której przeglądarka używa do określania, które zasoby czcionek należy pobrać i zastosować na bieżącej stronie.
Rozważ użycie czcionki zmiennej
Czcionki zmienne mogą znacznie zmniejszyć rozmiar plików czcionek w przypadku, gdy potrzebujesz wielu wariantów czcionki. Zamiast wczytywać style zwykły i pogrubiony oraz ich wersje kursywą, możesz wczytać jeden plik zawierający wszystkie informacje. Rozmiary plików czcionek zmiennych będą jednak większe niż w przypadku pojedynczego wariantu czcionki, ale mniejsze niż w przypadku połączenia wielu wariantów. Zamiast jednej dużej czcionki zmiennej lepiej najpierw udostępnić najważniejsze odmiany czcionki, a pozostałe pobrać później.
Czcionki zmienne są obecnie obsługiwane przez wszystkie nowoczesne przeglądarki. Więcej informacji znajdziesz we wprowadzeniu do czcionek zmiennych w internecie.
Wybierz odpowiedni format
Każda deklaracja @font-face zawiera nazwę rodziny czcionek, która pełni funkcję logicznej grupy wielu deklaracji, właściwości czcionki, takich jak styl, grubość i rozciągnięcie, oraz deskryptor src, który określa listę lokalizacji zasobu czcionki według priorytetu.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
/* Only serve WOFF if necessary. Otherwise,
WOFF 2.0 is fine by itself. */
url('/fonts/awesome.woff') format('woff');
}
@font-face {
font-family: 'Awesome Font';
font-style: italic;
font-weight: 400;
src: local('Awesome Font Italic'),
url('/fonts/awesome-i.woff2') format('woff2'),
url('/fonts/awesome-i.woff') format('woff');
}
Najpierw zwróć uwagę, że powyższe przykłady definiują jedną rodzinę czcionek Awesome Font z 2 stylami (zwykłym i kursywą), z których każdy wskazuje inny zestaw zasobów czcionek. Każdy deskryptor src zawiera listę wariantów zasobów rozdzielonych przecinkami i uporządkowanych według priorytetu:
- Dyrektywa
local()umożliwia odwoływanie się do lokalnie zainstalowanych czcionek, ich wczytywanie i używanie. Jeśli użytkownik ma już zainstalowaną czcionkę w systemie, całkowicie pomija sieć, co jest najszybszym rozwiązaniem. - Dyrektywa
url()umożliwia wczytywanie zewnętrznych czcionek i może zawierać opcjonalną wskazówkęformat()wskazującą format czcionki, do której odwołuje się podany adres URL.
Gdy przeglądarka stwierdzi, że czcionka jest potrzebna, przegląda listę zasobów w określonej kolejności i próbuje wczytać odpowiedni zasób. Na przykład w przykładzie powyżej:
- Przeglądarka określa układ strony i ustala, które warianty czcionki są potrzebne do wyświetlenia określonego tekstu na stronie. Czcionki, które nie są częścią obiektowego modelu CSS (CSSOM) strony, nie są pobierane przez przeglądarkę, ponieważ nie są wymagane.
- W przypadku każdej wymaganej czcionki przeglądarka sprawdza, czy jest ona dostępna lokalnie.
- Jeśli czcionka nie jest dostępna lokalnie, przeglądarka przechodzi do definicji zewnętrznych:
- Jeśli wskazówka dotycząca formatu jest obecna, przeglądarka sprawdza, czy ją obsługuje, zanim rozpocznie pobieranie. Jeśli przeglądarka nie obsługuje podpowiedzi, przechodzi do następnej.
- Jeśli nie ma wskazówki dotyczącej formatu, przeglądarka pobiera zasób.
Połączenie dyrektyw lokalnych i zewnętrznych z odpowiednimi wskazówkami dotyczącymi formatu pozwala określić wszystkie dostępne formaty czcionek i pozostawić resztę przeglądarce. Przeglądarka określa, które zasoby są wymagane, i wybiera optymalny format.
Podzbiór zakresu Unicode
Oprócz właściwości czcionki, takich jak styl, grubość i rozciągnięcie, reguła @font-face umożliwia zdefiniowanie zestawu punktów kodowych Unicode obsługiwanych przez każdy zasób. Umożliwia to podzielenie dużej czcionki Unicode na mniejsze podzbiory (np. podzbiory łaciński, cyrylicki i grecki) i pobieranie tylko tych znaków, które są potrzebne do renderowania tekstu na danej stronie.
unicode-range deskryptor umożliwia podanie listy wartości zakresu rozdzielonych przecinkami. Każda z nich może mieć jedną z 3 różnych form:
- Pojedynczy punkt kodowy (np.
U+416) - Zakres przedziału (np.
U+400-4ff): wskazuje początkowy i końcowy punkt kodowy zakresu. - Zakres symboli wieloznacznych (np.
U+4??):?znaków oznacza dowolną cyfrę szesnastkową.
Możesz na przykład podzielić rodzinę czcionek Awesome Font na podzbiory łaciński i japoński, z których każdy będzie pobierany przez przeglądarkę w razie potrzeby:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-jp.woff2') format('woff2');
/* Japanese glyphs */
unicode-range: U+3000-9FFF, U+ff??;
}
Używanie podzbiorów zakresu Unicode i osobnych plików dla każdego wariantu stylistycznego czcionki pozwala zdefiniować złożoną rodzinę czcionek, którą można pobrać szybciej i wydajniej. Odwiedzający pobierają tylko te warianty i podzbiory, których potrzebują, i nie są zmuszeni do pobierania podzbiorów, których mogą nigdy nie zobaczyć ani nie użyć na stronie.
Prawie wszystkie przeglądarki obsługują unicode-range. Aby zapewnić zgodność ze starszymi przeglądarkami, może być konieczne użycie „ręcznego podzbioru”. W takim przypadku musisz udostępnić jeden zasób czcionki, który zawiera wszystkie niezbędne podzbiory, i ukryć pozostałe przed przeglądarką. Jeśli na przykład strona używa tylko znaków łacińskich, możesz usunąć inne glify i udostępnić ten konkretny podzbiór jako osobny zasób.
- Określ, które podzbiory są potrzebne:
- Jeśli przeglądarka obsługuje podzbiory unicode-range, automatycznie wybierze odpowiedni podzbiór. Strona musi tylko udostępniać pliki podzbiorów i określać odpowiednie zakresy unicode w regułach
@font-face. - Jeśli przeglądarka nie obsługuje podzbiorów unicode-range, strona musi ukryć wszystkie niepotrzebne podzbiory, czyli deweloper musi określić wymagane podzbiory.
- Jeśli przeglądarka obsługuje podzbiory unicode-range, automatycznie wybierze odpowiedni podzbiór. Strona musi tylko udostępniać pliki podzbiorów i określać odpowiednie zakresy unicode w regułach
- Generowanie podzbiorów czcionek:
- Użyj narzędzia pyftsubset o otwartym kodzie źródłowym, aby wyodrębnić podzbiór czcionek i je zoptymalizować.
- Niektóre serwery czcionek, np. Google Fonts, domyślnie automatycznie tworzą podzbiory.
- Niektóre usługi czcionek umożliwiają ręczne tworzenie podzbiorów za pomocą niestandardowych parametrów zapytania, których możesz użyć do ręcznego określenia wymaganego podzbioru dla swojej strony. Zapoznaj się z dokumentacją dostawcy czcionki.
Wybór czcionki i synteza
Każda rodzina czcionek może składać się z wielu wariantów stylistycznych (zwykły, pogrubiony, kursywa) i wielu grubości dla każdego stylu. Każdy z nich może z kolei zawierać bardzo różne kształty glifów, np. różną wielkość, odstępy lub zupełnie inny kształt.
Powyższy diagram przedstawia rodzinę czcionek, która oferuje 3 różne grubości pogrubienia:
- 400 (zwykła).
- 700 (pogrubienie).
- 900 (bardzo pogrubiona).
Wszystkie inne warianty pośrednie (oznaczone na szaro) są automatycznie mapowane przez przeglądarkę na najbliższy wariant.
Jeśli określona waga nie odpowiada żadnej twarzy, używana jest twarz o zbliżonej wadze. Zasadniczo pogrubione warianty są mapowane na kroje o większej wadze, a lekkie warianty – na kroje o mniejszej wadze.
Algorytm dopasowywania czcionek CSS
Podobna logika dotyczy wariantów kursywy. Projektant czcionki decyduje, które warianty zostaną utworzone, a Ty decydujesz, które warianty będą używane na stronie. Każdy wariant jest pobierany osobno, dlatego warto ograniczyć ich liczbę. Możesz na przykład zdefiniować 2 warianty pogrubione dla rodziny czcionek Awesome Font:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 700;
src: local('Awesome Font'),
url('/fonts/awesome-l-700.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
W przykładzie powyżej zadeklarowano rodzinę Awesome Font, która składa się z 2 zasobów obejmujących ten sam zestaw glifów łacińskich (U+000-5FF), ale oferujących 2 różne „grubości”: normalną (400) i pogrubioną (700). Co jednak się stanie, jeśli jedna z reguł CSS określa inną grubość czcionki lub ustawia właściwość font-style na italic?
- Jeśli nie ma dokładnego dopasowania czcionki, przeglądarka zastępuje ją najbliższą.
- Jeśli nie zostanie znalezione żadne dopasowanie stylistyczne (np. w przykładzie powyżej nie zadeklarowano żadnych wariantów kursywy), przeglądarka sama utworzy wariant czcionki.
Powyższy przykład ilustruje różnicę między rzeczywistymi a syntetyzowanymi wynikami czcionki Open Sans. Wszystkie zsyntetyzowane warianty są generowane na podstawie jednej czcionki o wadze 400. Jak widać, wyniki znacznie się różnią. Nie podano szczegółowych informacji o tym, jak wygenerować warianty pogrubione i pochyłe. Dlatego wyniki różnią się w zależności od przeglądarki i są w dużym stopniu uzależnione od czcionki.
Lista kontrolna optymalizacji rozmiaru czcionki internetowej
- Sprawdzaj i monitoruj użycie czcionek: nie używaj zbyt wielu czcionek na stronach i zminimalizuj liczbę używanych wariantów każdej czcionki. Zapewnia to użytkownikom większą spójność i szybsze działanie.
- W miarę możliwości unikaj starszych formatów: formaty EOT, TTF i WOFF są większe niż WOFF 2.0. Formaty EOT i TTF są całkowicie zbędne, natomiast format WOFF może być akceptowalny, jeśli musisz obsługiwać Internet Explorer 11. Jeśli kierujesz reklamy tylko na nowoczesne przeglądarki, najprostszym i najwydajniejszym rozwiązaniem jest używanie tylko formatu WOFF 2.0.
- Podziel zasoby czcionki na podzbiory: wiele czcionek można podzielić na podzbiory lub rozdzielić na wiele zakresów Unicode, aby dostarczać tylko glify wymagane na danej stronie. Zmniejsza to rozmiar pliku i przyspiesza pobieranie zasobu. Podczas definiowania podzbiorów należy jednak zachować ostrożność, aby zoptymalizować ponowne użycie czcionki. Na przykład nie pobieraj na każdej stronie innego, ale pokrywającego się zestawu znaków. Dobrym rozwiązaniem jest tworzenie podzbiorów na podstawie skryptu, np. alfabetu łacińskiego i cyrylicy.
- Nadaj priorytet
local()na liściesrc: umieszczenielocal('Font Name')na początku listysrcgwarantuje, że żądania HTTP nie będą wysyłane w przypadku czcionek, które są już zainstalowane. - Użyj Lighthouse, aby sprawdzić kompresję tekstu.
Wpływ na największe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS)
W zależności od zawartości strony węzły tekstowe mogą być brane pod uwagę w przypadku największego wyrenderowania treści (LCP). Dlatego tak ważne jest, aby zadbać o jak najmniejszy rozmiar czcionek internetowych. W tym celu postępuj zgodnie z wskazówkami podanymi w tym artykule. Dzięki temu użytkownicy zobaczą tekst na stronie tak szybko, jak to możliwe.
Jeśli obawiasz się, że pomimo optymalizacji tekst na stronie może pojawiać się zbyt długo z powodu dużego zasobu czcionki internetowej, właściwość font-display ma kilka ustawień, które mogą pomóc uniknąć niewidocznego tekstu podczas pobierania czcionki. Użycie wartości swap może jednak spowodować znaczne przesunięcia układu, które wpłyną na skumulowane przesunięcie układu (CLS) w Twojej witrynie. W miarę możliwości używaj wartości optional lub fallback.
Jeśli czcionki internetowe są kluczowe dla Twojej marki, a co za tym idzie, dla wrażeń użytkowników, rozważ wstępne wczytywanie czcionek, aby przeglądarka mogła wcześniej wysłać żądanie ich pobrania. Może to skrócić okres wymiany, jeśli używasz font-display: swap, lub okres blokady, jeśli nie używasz font-display.