Zmniejsz rozmiar czcionki internetowej

Ilya Grigorik
Jeremy Wagner

Typografia ma kluczowe znaczenie dla projektowania, budowania marki, czytelności i przystępności. Czcionki internetowe umożliwiają wszystkie powyższe funkcje i wiele więcej: tekst można zaznaczać, przeszukiwać i powiększać, a także dostosować go do wysokiej rozdzielczości DPI. Zapewnia to spójne i ostre renderowanie tekstu niezależnie od rozmiaru ekranu i rozdzielczości. Czcionki WebFonts mają kluczowe znaczenie dla projektowania, UX i wydajności.

Optymalizacja czcionek na stronę internetową to kluczowy element ogólnej strategii dotyczącej skuteczności. Każda czcionka to dodatkowy zasób, a niektóre z nich mogą blokować renderowanie tekstu, ale to, że strona korzysta z WebFonts, nie oznacza, że musi się wolniej renderować. Wręcz przeciwnie, zoptymalizowane czcionki w połączeniu z rozsądną strategią ich wczytywania i stosowania na stronie mogą pomóc zmniejszyć jej całkowity rozmiar i skrócić czas renderowania strony.

Składnia czcionki internetowej

Czcionka internetowa to zbiór glifów, a każdy z nich to kształt wektorowy opisujący literę lub symbol. W związku z tym 2 proste zmienne określają rozmiar konkretnego pliku czcionek: złożoność ścieżek wektorów każdego glifu i liczba glifów w konkretnej czcionce. Na przykład Open Sans, jedna z najpopularniejszych czcionek WebFonts, zawiera 897 glifów, w tym alfabetu łacińskiego, greckiego i cyrylicy.

Tabela glifów czcionek

Wybierając czcionkę, zwróć uwagę, 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. Na przykład rodzina czcionek Google Noto ma obsługiwać wszystkie języki na świecie. Pamiętaj jednak, że całkowity rozmiar Noto z uwzględnieniem wszystkich języków powoduje pobranie pliku ZIP o wielkości co najmniej 1,1 GB.

Z tego posta dowiesz się, jak zmniejszyć rozmiar przesyłanego pliku z czcionkami internetowymi.

Formaty czcionek internetowych

Obecnie w internecie są używane dwa zalecane formaty kontenerów czcionek:

WOFF i WOFF 2.0 są obsługiwane przez wszystkie nowoczesne przeglądarki.

  • Wyświetlaj wersję WOFF 2.0 w nowoczesnych przeglądarkach.
  • Jeśli jest to absolutnie konieczne, na przykład gdy musisz obsługiwać przeglądarkę Internet Explorer 11, wyświetl WOFF jako opcję zastępczą.
  • Możesz też zrezygnować z czcionek internetowych w starszych przeglądarkach i korzystać z czcionek systemowych. Może to być lepsze również na starszych urządzeniach.
  • Ponieważ WOFF i WOFF 2.0 obowiązują wszystkie nowoczesne i starsze przeglądarki, używanie EOT i TTF nie jest już konieczne i może wydłużyć czas pobierania czcionek internetowych.

Czcionki internetowe i kompresja

Zarówno programy WOFF, jak i WOFF 2.0 mają wbudowaną funkcję kompresji. Wewnętrzna kompresja WOFF 2.0 wykorzystuje Brotli i zapewnia nawet o 30% lepszą kompresję niż WOFF. Więcej informacji znajdziesz w raporcie oceny WOFF 2.0.

Warto też zauważyć, że niektóre formaty czcionek zawierają dodatkowe metadane, np. informacje o podpowiedziach na temat czcionek i kerningu, które na niektórych platformach mogą nie być niezbędne, co umożliwia dalszą optymalizację rozmiaru plików. Na przykład Google Fonts obsługuje ponad 30 zoptymalizowanych wariantów każdej czcionki oraz automatycznie wykrywa i wyświetla optymalną wersję dla każdej platformy i przeglądarki.

Zdefiniuj rodzinę czcionek za pomocą funkcji @font-face

Reguła CSS @font-face umożliwia określenie lokalizacji zasobu czcionki, jego cech stylu oraz punktów kodowych Unicode, w których ma być stosowana. Kombinacji takich deklaracji @font-face można użyć do utworzenia „rodziny czcionek”, która będzie używana przez przeglądarkę do oceny, które zasoby czcionek należy pobrać i zastosować na bieżącej stronie.

Rozważ użycie czcionki zmiennej

W sytuacjach, gdy potrzebujesz wielu wersji danej czcionki, czcionki zmienne mogą znacznie zmniejszyć rozmiar pliku. Zamiast ładować style zwykłe i pogrubione oraz ich wersje z kursywą, możesz załadować pojedynczy plik ze wszystkimi informacjami. Zmienne rozmiary plików czcionek będą jednak większe niż w przypadku poszczególnych wariantów czcionek, ale będą mniejsze niż w przypadku kombinacji wielu wariantów. Zamiast jednej dużej czcionki zmiennej lepiej jest wyświetlić w pierwszej kolejności najważniejsze warianty czcionki, a pozostałe warianty zostaną pobrane później.

Czcionki zmiennych są teraz obsługiwane przez wszystkie nowoczesne przeglądarki. Więcej informacji znajdziesz w artykule Wprowadzenie do czcionek zmiennych w internecie.

Wybierz odpowiedni format

Każda deklaracja @font-face zawiera nazwę rodziny czcionek, która stanowi grupę logiczną wielu deklaracji, właściwości czcionki, takie jak styl, waga i rozciąganie, oraz deskryptor src, który określa listę priorytetów lokalizacji dla zasobu czcionki.

@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');
}

Po pierwsze, zwróć uwagę na to, że te przykłady definiują jedną rodzinę czcionek Wspaniała czcionka z 2 stylami (normalnym i kursywą), z których każdy wskazuje inny zestaw zasobów czcionek. Z kolei każdy deskryptor src zawiera rozdzieloną przecinkami listę wariantów zasobu, która jest priorytetem.

  • Dyrektywa local() umożliwia odwoływanie się do czcionek zainstalowanych lokalnie, wczytywanie i używanie tych czcionek. Jeśli użytkownik ma już zainstalowaną czcionkę w swoim systemie, spowoduje to całkowite pominięcie sieci i będzie najszybszym.
  • Dyrektywa url() umożliwia ładowanie czcionek zewnętrznych i może zawierać opcjonalną wskazówkę format() wskazującą format czcionki, do której odwołuje się podany URL.

Gdy przeglądarka ustali, że czcionka jest potrzebna, wykona iterację na podanej liście zasobów w określonej kolejności i spróbuje wczytać odpowiedni zasób. Na przykład w tym przykładzie:

  1. Przeglądarka określa układ strony i określa, które warianty czcionki są wymagane do wyrenderowania określonego tekstu na stronie. Czcionki, które nie należą do modelu obiektu CSS (CSSOM) strony, nie są pobierane przez przeglądarkę, ponieważ nie są wymagane.
  2. W przypadku każdej wymaganej czcionki przeglądarka sprawdza, czy czcionka jest dostępna lokalnie.
  3. Jeśli czcionka nie jest dostępna lokalnie, przeglądarka użyje definicji zewnętrznych:
    • Jeśli dostępna jest wskazówka dotycząca formatu, przed rozpoczęciem pobierania przeglądarka sprawdzi, czy ją obsługuje. Jeśli przeglądarka nie obsługuje podpowiedzi, przechodzi do następnej.
    • Jeśli nie ma podpowiedzi dotyczącej formatu, przeglądarka pobierze zasób.

Kombinacja dyrektyw lokalnych i zewnętrznych z odpowiednimi wskazówkami dotyczącymi formatu pozwala określić wszystkie dostępne formaty czcionek, a przeglądarka zajmie się resztą. Przeglądarka określa, które zasoby są wymagane, i wybiera optymalny format.

Podrzędne ustawienie zakresu Unicode

Oprócz właściwości czcionki, takich jak styl, waga i rozciąganie, reguła @font-face umożliwia określenie zestawu punktów kodowych Unicode obsługiwanych przez każdy zasób. W ten sposób możesz podzielić dużą czcionkę Unicode na mniejsze podzbiory (np. podzbiory alfabetu łacińskiego, cyrylicy i greckiego) i pobrać tylko glify wymagane do renderowania tekstu na określonej stronie.

Deskryptor unicode-range umożliwia podanie rozdzielanej przecinkami listy wartości zakresu, z których każda może mieć jedną z 3 form:

  • Pojedynczy punkt kodowy (na przykład U+416)
  • Zakres przedziału (np. U+400-4ff): wskazuje początkowy i końcowy punkt kodowy zakresu.
  • Zakres symboli wieloznacznych (np. U+4??): ? oznacza dowolną cyfrę szesnastkową

Możesz na przykład podzielić rodzinę Wspaniała czcionka na łaciński i japoński. podzbiory, z których każdy w razie potrzeby pobiera:

@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??;
}

Wykorzystanie podzbiorów zakresów Unicode i oddzielnych plików dla każdej stylistycznej wersji czcionki umożliwia zdefiniowanie złożonej rodziny czcionek, co jest szybsze i efektywniejsze do pobrania. Użytkownicy pobierają tylko potrzebne warianty i podzbiory i nie są zobowiązani do pobierania podzbiorów, których mogą nigdy nie zobaczyć ani wykorzystać 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 ustawienia podrzędnego”. W takim przypadku musisz udostępnić pojedynczy zasób czcionki, który zawiera wszystkie niezbędne podzbiory, i ukryć resztę przed przeglądarką. Jeśli na przykład strona zawiera tylko znaki łacińskie, możesz pozbyć się innych glifów i wyświetlać ten określony podzbiór jako osobny zasób.

  1. Określ, które podzbiory są potrzebne:
    • Jeśli przeglądarka obsługuje podrzędne ustawienie zakresu Unicode, automatycznie wybiera właściwy podzbiór. Wystarczy na stronie udostępnić pliki podzbioru i określić odpowiednie zakresy Unicode w regułach @font-face.
    • Jeśli przeglądarka nie obsługuje podzbioru zakresów Unicode, strona musi ukryć wszystkie niepotrzebne podzbiory; Oznacza to, że programista musi określić wymagane podzbiory.
  2. Generowanie podzbiorów czcionek:
    • Użyj narzędzia pyftsubset typu open source, aby podzbiór i zoptymalizować czcionki.
    • Niektóre serwery czcionek – takie jak Google Font – będą domyślnie automatycznie podzywać w toku.
    • Niektóre usługi czcionek umożliwiają ręczne ustawianie podzbiorów za pomocą niestandardowych parametrów zapytania, których możesz użyć do ręcznego określenia wymaganego podzbioru dla strony. Zapoznaj się z dokumentacją od dostawcy czcionek.

Wybór i synteza czcionek

Każda rodzina czcionek może się składać z kilku wariantów stylistycznych (zwykła, pogrubiona, kursywa) i różnych grubości dla każdego stylu. Każdy z nich może zawierać bardzo różne kształty glifów, na przykład różne odstępy, wymiary lub zupełnie inny kształt.

Grubość czcionek

Na diagramie powyżej widać rodzinę czcionek z 3 różnymi pogrubieniami:

  • 400 (standardowy).
  • 700 (pogrubienie).
  • 900 (bardzo pogrubione).

Pozostałe warianty (oznaczone na szaro) są automatycznie mapowane przez przeglądarkę na najbliższy wariant.

Jeśli podasz wagę, dla której nie ma twarzy, zostanie użyta twarz z pobliską wagą. Ogólnie pogrubiona waga mapuje się na twarze o większych ciężarach, a w przypadku ciężarów ciężarowych – do twarzy o mniejszej wadze.

Algorytm dopasowywania czcionek CSS

Podobna logika dotyczy wariantów kursywy. Projektant czcionek określa, które warianty będą tworzyć, a Ty decydujesz, których wersji chcesz używać na stronie. Każdy wariant można pobrać oddzielnie, więc liczba wariantów powinna być niewielka. Na przykład dla rodziny Niesamowita czcionka możesz zdefiniować 2 pogrubione warianty:

@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;
}

Powyższy przykład deklaruje rodzinę niesamowitych czcionek, która składa się z 2 zasobów obejmujących ten sam zestaw glifów łacińskich (U+000-5FF), ale mających 2 różne „wagi”: normalną (400) i pogrubioną (700). Co jednak się stanie, jeśli jedna z reguł CSS określa inną grubość czcionki lub ustawi właściwość font-style na italic?

  • Jeśli dokładne dopasowanie czcionki nie jest dostępne, przeglądarka wstawia najbliższe dopasowanie.
  • Jeśli nie znaleziono dopasowania stylistycznego (np. w powyższym przykładzie nie zadeklarowano wariantów kursywy), przeglądarka tworzy własny wariant czcionki.
Synteza czcionek

Powyższy przykład obrazuje różnicę między rzeczywistymi wynikami czcionek w formacie Open Sans a wynikami wygenerowanych syntetycznie. Wszystkie wygenerowane warianty są generowane na podstawie pojedynczej czcionki o grubości 400. Jak widać, różnica w wynikach jest znaczna. Szczegółowe instrukcje generowania wariantów pogrubionych i ukośnych nie zostały określone. Wyniki różnią się w zależności od przeglądarki i w dużym stopniu zależą od czcionki.

Lista kontrolna optymalizacji rozmiaru czcionki w internecie

  • Sprawdź i monitoruj wykorzystanie czcionek: nie stosuj zbyt wielu czcionek na stronie i ogranicz liczbę wariantów tych już zastosowanych. Dzięki temu zapewnisz użytkownikom bardziej spójną i szybszą obsługę.
  • W miarę możliwości unikaj starszych formatów: formaty EOT, TTF i WOFF są większe niż formaty WOFF 2.0. Formaty EOT i TTF to ściśle niepotrzebne formaty, w przypadku których format WOFF może być akceptowalny, jeśli potrzebujesz obsługi przeglądarki Internet Explorer 11. Jeśli kierujesz swoje reklamy tylko na nowoczesne przeglądarki, użycie WOFF 2.0 jest najprostszą i najskuteczniejszą opcją.
  • Podziel zasoby czcionek na podgrupy: wiele czcionek można podzielić na podgrupy lub różne zakresy unicode, aby umożliwić dostarczanie tylko tych glifów, których wymaga dana strona. Pozwala to zmniejszyć rozmiar pliku i przyspieszyć pobieranie zasobu. Jednak podczas definiowania podzbiorów pamiętaj o optymalizacji pod kątem ponownego użycia czcionek. Nie pobieraj np. na każdej stronie różnych, ale nakładających się zestawów znaków. O sprawdzoną metodą jest dzielenie na podgrupy na podstawie pisma, na przykład alfabet łaciński i cyrylica.
  • Nadaj priorytet elementowi local() na liście src: jeśli na liście src znajduje się adres local('Font Name'), zapewni to, że żądania HTTP nie będą wysyłane w przypadku już zainstalowanych czcionek.
  • Użyj narzędzia Lighthouse, aby przetestować 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ą zostać uznane za największe wyrenderowanie treści (LCP). Dlatego tak ważne jest, aby czcionki internetowe były jak najmniejsze. W tym celu postępuj zgodnie ze wskazówkami podanymi w tym artykule, aby użytkownicy mogli zobaczyć tekst na Twojej stronie tak szybko, jak to możliwe.

Jeśli obawiasz się, że mimo działań optymalizacyjnych tekst na stronie może się pojawić za długo z powodu dużego zasobu czcionek internetowych, w usłudze font-display dostępne są ustawienia pozwalające uniknąć niewidocznego tekstu podczas pobierania czcionki. Używanie wartości swap może jednak spowodować istotne przesunięcia układu, które będą miały wpływ na skumulowane przesunięcie układu (CLS) witryny. W miarę możliwości stosuj wartości optional lub fallback.

Jeśli czcionki internetowe mają kluczowe znaczenie dla budowania marki, a co za tym idzie, dla wygody użytkowników, rozważ wstępne wczytanie czcionek, dzięki czemu przeglądarka będzie miała pierwszeństwo. Może to skrócić zarówno okres wymiany, jeśli używasz elementu font-display: swap, jak i okres blokowania, jeśli nie używasz font-display.