Typografia ma fundamentalne znaczenie dla dobrego projektu, budowania marki, czytelności i dostępności. Czcionki internetowe umożliwiają to wszystko i jeszcze więcej: tekst można zaznaczać, przeszukiwać, powiększać i wyświetlać w wysokiej rozdzielczości. Zapewniają spójne i wyraźne renderowanie tekstu niezależnie od rozmiaru i rozdzielczości ekranu. Czcionki internetowe mają kluczowe znaczenie dla dobrego projektu, UX i wydajności.
Optymalizacja czcionek internetowych jest ważnym 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 oznacza, że strona musi renderować się wolniej. Wręcz przeciwnie, zoptymalizowane czcionki w połączeniu z przemyślaną strategią ich wczytywania i stosowania na stronie mogą pomóc zmniejszyć łączny rozmiar strony i skrócić czas renderowania.
Budowa czcionki internetowej
Czcionka internetowa to zbiór glifów, a każdy glif to kształt wektorowy opisujący literę lub symbol. W rezultacie rozmiar konkretnego pliku czcionki zależy od 2 prostych zmiennych: złożoności ścieżek wektorowych każdego glifu i liczby 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 cyrylicy.
Wybierając czcionkę, warto sprawdzić, które zestawy znaków są obsługiwane. Jeśli chcesz zlokalizować treści na stronie w wielu językach, użyj czcionki, która zapewni użytkownikom spójny wygląd i wrażenia. Na przykład rodzina czcionek Noto firmy Google ma obsługiwać wszystkie języki świata. Pamiętaj jednak, że łączny rozmiar czcionki Noto ze wszystkimi językami to ponad 1,1 GB.
Z tego posta dowiesz się, jak zmniejszyć rozmiar pliku czcionek internetowych.
Formaty czcionek internetowych
Obecnie w internecie używane są 2 zalecane formaty kontenerów czcionek:
Formaty WOFF i WOFF 2.0 są szeroko obsługiwane przez wszystkie nowoczesne przeglądarki.
- W nowoczesnych przeglądarkach używaj wariantu WOFF 2.0.
- Jeśli jest to absolutnie konieczne – na przykład jeśli nadal musisz obsługiwać Internet Explorer 11 – użyj WOFF jako rezerwy.
- Możesz też zrezygnować z używania czcionek internetowych w starszych przeglądarkach i wrócić do czcionek systemowych. Może to też zwiększyć wydajność starszych urządzeń o ograniczonych zasobach.
- Ponieważ formaty WOFF i WOFF 2.0 obejmują wszystkie nowoczesne i starsze przeglądarki, używanie formatów EOT i TTF nie jest już konieczne i może wydłużyć czas pobierania czcionek internetowych.
Czcionki internetowe i kompresja
Formaty WOFF i WOFF 2.0 mają wbudowaną kompresję. Wewnętrzna kompresja WOFF 2.0 wykorzystuje Brotli i zapewnia 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 informacje o podpowiedziach i kerningu, które mogą nie być potrzebne na niektórych platformach. Pozwala to na dalszą optymalizację rozmiaru pliku. Na przykład Google Fonts utrzymuje ponad 30 zoptymalizowanych wariantów każdej czcionki i automatycznie wykrywa oraz dostarcza optymalny wariant dla każdej platformy i przeglądarki.
Definiowanie rodziny czcionek za pomocą @font-face
Reguła CSS @font-face umożliwia zdefiniowanie lokalizacji konkretnego zasobu czcionki, jej charakterystyki stylu oraz punktów kodowych Unicode, dla których ma być używana. Połączenie takich deklaracji @font-face może służyć do utworzenia „rodziny czcionek”, której przeglądarka będzie 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 przypadkach, 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. Rozmiar pliku czcionki zmiennej będzie jednak większy niż rozmiar pojedynczego wariantu czcionki, ale mniejszy niż połączenie wielu wariantów. Zamiast jednej dużej czcionki zmiennej lepiej jest najpierw wyświetlić najważniejsze warianty czcionki, a pozostałe pobrać później.
Czcionki zmienne są teraz 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 rolę 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ę Awesome Font z 2 stylami (zwykłym i kursywą), z których każdy wskazuje inny zestaw zasobów czcionek. Z kolei każdy deskryptor src zawiera listę wariantów zasobów oddzielonych przecinkami 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, pomija to sieć i jest najszybsze. - Dyrektywa
url()umożliwia wczytywanie czcionek zewnętrznych i może zawierać opcjonalną podpowiedźformat()wskazującą format czcionki, do której odwołuje się podany adres URL.
Gdy przeglądarka stwierdzi, że czcionka jest potrzebna, przechodzi przez podaną listę zasobów w określonej kolejności i próbuje wczytać odpowiedni zasób. Na przykład:
- Przeglądarka wykonuje układ strony i określa, które warianty czcionek są potrzebne do renderowania określonego tekstu na stronie. Czcionki, które nie są częścią modelu CSS Object Model (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 jest podpowiedź formatu, 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 podpowiedzi formatu, przeglądarka pobiera zasób.
Połączenie dyrektyw lokalnych i zewnętrznych z odpowiednimi podpowiedziami formatu umożliwia określenie wszystkich dostępnych formatów czcionek, a resztę pozostawić przeglądarce. Przeglądarka określa, które zasoby są wymagane, i wybiera optymalny format.
Podział na podzbiory Unicode-range
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. Dzięki temu możesz podzielić dużą czcionkę Unicode na mniejsze podzbiory (np. podzbiory łacińskie, cyrylicy i greckie) i pobierać tylko glify potrzebne do renderowania tekstu na konkretnej stronie.
- Pojedynczy punkt kodowy (np.
U+416). - Zakres interwałów (np.
U+400-4ff): wskazuje początkowy i końcowy punkt kodowy zakresu. - Zakres symboli wieloznacznych (np.
U+4??): znaki