Ulepszone ustawienia zastępcze czcionek

Katie Hempenius

Podsumowanie

W tym artykule znajdziesz szczegółowe informacje o fontach zapasowych i interfejsach API size-adjust, ascent-override, descent-override i line-gap-override. Te interfejsy API umożliwiają tworzenie zastępczych krojów czcionek przy użyciu czcionek lokalnych, które są zbliżone lub dokładnie pasują do wymiarów czcionki internetowej. Pozwala to ograniczyć lub wyeliminować zmiany układu spowodowane wymianą czcionek.

Jeśli nie chcesz czytać tego artykułu, możesz od razu zacząć korzystać z tych interfejsów API, korzystając z tych narzędzi:

Narzędzia frameworku:

• @next/font: od wersji Next 13 next/font automatycznie korzysta z zastąpień danych o czcionkach i size-adjust, aby zapewnić pasujące czcionki zastępcze.
• @nuxtjs/fontaine: od wersji Nuxt 3 możesz używać funkcji nuxt/fontaine, aby automatycznie generować i wstawiać pasujące czcionki zastępcze do arkuszy stylów używanych przez aplikację Nuxt.

Narzędzia spoza frameworka:

• Fontaine: Fontaine to biblioteka, która automatycznie generuje i wstawia czcionki zastępcze, które używają zastąpień czcionek.
• To repo zawiera zastąpienia danych czcionki dla wszystkich czcionek hostowanych przez Google Fonts. Te wartości możesz skopiować i wklejać do arkuszy stylów.

Tło

Czcionka zastępcza to krój czcionki używany, gdy podstawowy krój nie został jeszcze załadowany lub brakuje w nim glifów niezbędnych do renderowania zawartości strony. Na przykład kod CSS poniżej wskazuje, że jako czcionka zastępcza dla "Roboto" należy użyć rodziny czcionek sans-serif.

font-family: "Roboto" , sans-serif;

Czcionki zastępcze można stosować do szybszego renderowania tekstu (czyli za pomocą font-display: swap). Dzięki temu treści na stronie są czytelniejsze i użyteczne wcześniej. Jednak w przeszłości wiązało się to z niestabilnością układu: zmiany w układzie często występują, gdy czcionka zastępcza jest zastępowana przez czcionkę internetową. Nowe interfejsy API opisane poniżej mogą jednak zmniejszyć lub wyeliminować ten problem, umożliwiając tworzenie czcionek zapasowych, które zajmują tyle samo miejsca co ich odpowiedniki w czcionkach internetowych.

Ulepszone czcionki zastępcze

Istnieją 2 możliwe podejścia do generowania „ulepszonego” czcionki zastępczej. Prostsze podejście korzysta tylko z interfejsu API zastępowania danych dotyczących czcionek. Bardziej skomplikowane (ale też bardziej zaawansowane) podejście wykorzystuje zarówno interfejs API zastępowania danych dotyczących czcionek, jak i element size-adjust. Z tego artykułu dowiesz się, jak stosować oba te podejścia.

Jak działają zastąpienia danych dotyczących czcionek

Wprowadzenie

Zastąpienia danych czcionki umożliwiają zastąpienie wartości w przypadku wysokości, spadku i odstępu między wierszami:

• Wzniesienie to największa odległość, o którą znaki czcionki wystają ponad podstawę.
• Descent to największa odległość, o którą znaki czcionki sięgają poniżej linii bazowej.
• Odstęp między wierszami, zwany też „interlinią”, mierzy odległość między kolejnymi wierszami tekstu.

Zastępcze dane czcionki można użyć do zastąpienia wartości wspięcia, opuszczenia i odstępu między wierszami czcionki awaryjnej, aby dopasować je do wartości wspięcia, opuszczenia i odstępu między wierszami czcionki internetowej. W rezultacie czcionka internetowa i dostosowana czcionka zastępcza będą zawsze miały takie same wymiary pionowe.

Zastąpienia danych pomiarowych czcionek są używane w takiej arkuszy stylów:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Narzędzia wymienione na początku tego artykułu mogą generować prawidłowe wartości zastępowania danych dotyczących czcionek. Możesz je jednak obliczyć samodzielnie.

Obliczanie zastąpień danych dotyczących czcionek

Podane niżej równania dają wartości zastępcze czcionki dla danej czcionki internetowej. Wartości zastąpień danych dotyczących czcionek powinny być podawane w postaci procentów (np. 105%), a nie liczb dziesiętnych.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Oto przykłady zastąpień danych czcionki dla czcionki Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

Wartości ascent, descent, line-gap i unitsPerEm pochodzą z metadanych czcionki internetowej. W następnej sekcji tego artykułu znajdziesz informacje o tym, jak uzyskać te wartości.

Czytanie tabel czcionek

Metadane czcionki (szczególnie tabele czcionek) zawierają wszystkie informacje potrzebne do obliczenia zastąpień danych czcionki.

Oto kilka narzędzi, które możesz wykorzystać do odczytania metadanych czcionki:

• fontkit to mechanizm czcionek stworzony dla Node.js. Ten fragment kodu pokazuje, jak używać pakietu fontkit do obliczania zastąpień danych dotyczących czcionek.
• Capsize to biblioteka z rozmiarami i układem czcionek. Capsize udostępnia interfejs API do uzyskiwania informacji o różnych parametrach czcionek.
• fontdrop.info to strona internetowa, która umożliwia wyświetlanie tabel czcionek i innych informacji o czcionkach w przeglądarce.
• Font Forge to popularny edytor czcionek na komputer. Aby wyświetlić ascent, descent i line-gap: otwórz okno Font Info, wybierz menu OS/2, a potem kartę Metrics. Aby wyświetlić UPM: otwórz okno Font Info, a potem wybierz menu General.

Tabele czcionek

Możesz zauważyć, że pojęcia takie jak „wzrost” są uwzględniane w różnych rodzajach danych, np. hheaAscent, typoAscent i winAscent. Wynika to z różnych podejść do renderowania czcionek w różnych systemach operacyjnych: programy na urządzeniach z systemem OSX zwykle używają metryki czcionki hhea*, a programy na urządzeniach z systemem Windows zwykle używają metryki czcionki typo* (nazywanej też sTypo*) lub win*.

W zależności od czcionki, przeglądarki i systemu operacyjnego czcionka zostanie wyrenderowana za pomocą danych hhea, typo lub win.

Więcej informacji o tym, jak działają dane dotyczące czcionek w różnych systemach operacyjnych, znajdziesz w tym artykule o danych pionowych.

Zgodność na różnych urządzeniach

W przypadku zdecydowanej większości czcionek (np. około 90% czcionek hostowanych przez Google Fonts) zastąpienia danych czcionki można bezpiecznie używać bez znajomości systemu operacyjnego użytkownika. Innymi słowy, w przypadku tych czcionek wartości ascent-override, descent-override i linegap-override pozostają takie same niezależnie od tego, czy mają zastosowanie dane hhea, typo czy win. W tym repo znajdziesz informacje o tym, do których fontów się to odnosi, a do których nie.

Jeśli używasz czcionki, która wymaga stosowania osobnych zestawów zastąpień danych czcionki na urządzeniach z systemem OS X i Windows, zalecamy używanie zastąpień danych czcionki i wartości size-adjust tylko wtedy, gdy możesz zmienić style CSS na podstawie systemu operacyjnego użytkownika.

Używanie zastąpień danych dotyczących czcionek

Zastąpione dane czcionki są obliczane na podstawie pomiarów pochodzących z metadanych czcionki internetowej (a nie czcionki zastępczej), dlatego pozostają takie same niezależnie od tego, która czcionka jest używana jako czcionka zastępcza. Na przykład:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Jak działa dostosowanie rozmiaru

Wprowadzenie

Opis CSS size-adjust proporcjonalnie skaluje szerokość i wysokość znaków czcionki. Na przykład size-adjust: 200% skaluje znaki czcionki do podwójnego rozmiaru, a size-adjust: 50% – do połowy.

Sam size-adjust ma ograniczone zastosowanie do ulepszania czcionek zapasowych: w większości przypadków czcionkę zapasową trzeba nieco zwęzić lub poszerzyć (a nie skalować proporcjonalnie), aby pasowała do czcionki internetowej. Połączenie size-adjust z przesłonięciem danych dotyczących czcionek umożliwia jednak dopasowanie dowolnych 2 czcionek zarówno w poziomie, jak i w pionie.

Oto jak używać size-adjust w arkuszu stylów:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

Ze względu na sposób obliczania wartości size-adjust (omówiony w następnej sekcji) wartość size-adjust (i odpowiednie zastąpienia danych dotyczących czcionek) zmienia się w zależności od używanego czcionki zastępczego:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Obliczanie zastąpień rozmiaru i czcionki

Oto wzory do obliczania zastąpień danych size-adjust i danych czcionki:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

Większość z tych danych wejściowych (czyli wzniosłość, skurcz i odstęp między liniami) można odczytać bezpośrednio z metadanych czcionki internetowej. Wartość avgCharacterWidth musi być jednak przybliżona.

Przybliżanie średniej szerokości znaków

Ogólnie średnią szerokość znaku można oszacować tylko w przybliżeniu, ale w niektórych przypadkach można ją obliczyć dokładnie: na przykład, gdy używasz fontu o stałej szerokości lub gdy treść ciągu tekstowego jest znana z góry.

Przykładem naiwnego podejścia do obliczania avgCharacterWidth jest obliczenie średniej szerokości wszystkich znaków [a-z\s].

Jednak nadanie wszystkim znakom jednakowej wagi prawdopodobnie spowoduje, że szerokość często używanych liter (np. e) będzie niewystarczająca, a szerokość rzadko używanych liter (np. z) będzie zbyt duża.

Bardziej złożonym podejściem, które zwiększa dokładność, jest uwzględnienie częstości występowania liter i zamiast tego obliczenie średniej szerokości znaków [a-z\s] z uwzględnieniem częstotliwości. W tym artykule znajdziesz informacje o częstości występowania liter i średnim długości słów w tekstach angielskich.

Wybór metody

Oba omówione w tym artykule podejścia mają swoje zalety i wady:

• Zastępowania danych o czcionkach są dobrym rozwiązaniem, jeśli dopiero zaczynasz optymalizować czcionki zastępcze. Chociaż jest to prostsze z tych dwóch podejść, to zwykle jest wystarczająco skuteczne, aby znacznie zmniejszyć rozmiar zmian układu związanych z czcionką.

• Jeśli natomiast zależy Ci na większej precyzji i chcesz poświęcić trochę więcej czasu na testowanie, możesz użyć funkcji size-adjust. Jeśli zaimplementujesz to podejście prawidłowo, możesz skutecznie wyeliminować przesunięcia układu związane z czcionką.

Wybieranie czcionek zastępczych

Techniki opisane w tym artykule polegają na używaniu zastąpień danych czcionek i size-adjust do przekształcania powszechnie dostępnych czcionek lokalnych zamiast próby znalezienia lokalnego czcionki, która będzie bardzo zbliżona do czcionki internetowej. Podczas wybierania czcionek lokalnych należy pamiętać, że bardzo niewiele czcionki są powszechnie dostępne lokalnie, a żadna czcionka nie jest dostępna na wszystkich urządzeniach.

Arial to zalecana czcionka zastępcza dla czcionek bezszeryfowych, a Times New Roman to zalecana czcionka zastępcza dla czcionek szeryfowych. Żadna z tych czcionek nie jest jednak dostępna na Androidzie (Roboto to jedyna czcionka systemowa na Androidzie).

Przykład poniżej korzysta z 3 czcionek zapasowych, aby zapewnić obsługę wielu urządzeń: czcionki zapasowej przeznaczonej do urządzeń z systemem Windows lub Mac, czcionki zapasowej przeznaczonej do urządzeń z Androidem oraz czcionki zapasowej, która korzysta z uniwersalnej rodziny czcionek.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Prośba o opinię

Jeśli chcesz podzielić się z nami opinią na temat korzystania z zastąpień danych czcionek i elementów size-adjust, skontaktuj się z nami.