Ulepszone ustawienia zastępcze czcionek

Katie Hempenius
Katie Hempenius
Twitter

Podsumowanie

W tym artykule znajdziesz szczegółowe informacje o kreacjach zastępczych czcionek oraz interfejsach API size-adjust, ascent-override, descent-override i line-gap-override. Te interfejsy API umożliwiają używanie lokalnych czcionek do tworzenia zastępczych tarcz czcionek, które dokładnie odpowiadają wymiarom czcionki internetowej. Pozwala to ograniczyć lub wyeliminować przesunięcia układu spowodowane zamianą czcionki.

Jeśli wolisz pominąć ten artykuł, możesz użyć tych narzędzi, by od razu zacząć korzystać z tych interfejsów API:

Narzędzia do tworzenia ram:

  • @next/font: od następnej wersji 13 usługa next/font automatycznie używa zastąpień danych dotyczących czcionek i size-adjust, aby zapewnić dopasowane wartości zastępcze czcionek.
  • @nuxtjs/fontaine: od Nuxt 3 możesz używać nuxt/fontaine do automatycznego generowania i wstawiania pasujących zastępczych czcionek do arkuszy stylów używanych przez aplikację Nuxt.

Narzędzia niezwiązane z platformą:

  • Fontaine: biblioteka, która automatycznie generuje i wstawia kreacje zastępcze korzystające z zastąpienia danych czcionek.
  • To repozytorium zawiera zastąpienia danych dotyczących czcionek w przypadku wszystkich czcionek hostowanych przez Google Fonts. Wartości te możesz kopiować i wklejać do arkuszy stylów.

Wprowadzenie

Czcionka zastępcza to krój czcionki, który jest używany, gdy główna krój czcionki nie został jeszcze wczytany lub nie ma glifów niezbędnych do renderowania zawartości strony. Na przykład poniższy kod CSS wskazuje, że dla interfejsu "Roboto" powinna być używana rodzina czcionek sans-serif.

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

Czcionki zastępcze mogą być używane do szybszego renderowania tekstu (za pomocą font-display: swap). Dzięki temu zawartość strony jest wcześniej czytelna i użyteczna. W przeszłości wiązała się jednak z niestabilnością układu: zmiany układu często mają miejsce, gdy czcionka zastępcza jest zastąpiona czcionką zastępczą. Nowe interfejsy API opisane poniżej mogą jednak ograniczyć lub wyeliminować ten problem, umożliwiając tworzenie zastępczych tarcz czcionek, które zajmują taką samą ilość miejsca jak ich odpowiedniki.

Ulepszone ustawienia zastępczej czcionki

Są dwa sposoby generowania „lepszych” zastępczych czcionek. Prostsza metoda korzysta tylko z interfejsu API zastępującego dane dotyczące czcionki. Bardziej skomplikowany (ale bardziej zaawansowany) sposób wykorzystuje zarówno dane dotyczące czcionki, jak i interfejs size-adjust. W tym artykule opisujemy obie te metody.

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

Wprowadzenie

Zastąpienia danych dotyczących czcionki umożliwiają zastąpienie wysokości czcionki, spadku czcionki i odstępy między wierszami:

  • Wzniesienie mierzy największą odległość, na jaką glify czcionki wykraczają poza wartość bazową.
  • Spadek to najdłuższa odległość, na jaką glify czcionki wykraczają poza wartość bazową.
  • Przerwa między wierszami, nazywana też „początkiem”, mierzy odległość między kolejnymi wierszami tekstu.

Diagram przedstawiający wzrost, spadek i odstęp między linią a czcionką.

Zastąpienia danych czcionki mogą służyć do zastępowania w przypadku czcionki zastępczej i odstępu wzniesienia, spadku i odstępu między wierszami w celu dopasowania do wysokości, spadku i odstępu między wierszami czcionki internetowej. W związku z tym czcionka internetowa i dostosowana czcionka zastępcza będą zawsze miały te same wymiary pionowe.

Zastąpienia danych czcionek są używane w arkuszu stylów w następujący sposób:

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 umożliwiają generowanie prawidłowych wartości zastępowania danych czcionki. Możesz też jednak samodzielnie obliczyć te wartości.

Obliczanie zastąpień danych dotyczących czcionek

Poniższe równania powodują zastąpienie danych dotyczących czcionki w przypadku danej czcionki internetowej. Wartości zastąpień danych dotyczących czcionki powinny być zapisywane jako wartości procentowe (np. 105%), a nie ułamki dziesiętne.

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

Oto przykłady zastąpień danych dotyczących czcionki w przypadku 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 */

Wszystkie wartości ascent, descent, line-gap i unitsPerEm pochodzą z metadanych czcionki internetowej. Z następnej sekcji tego artykułu dowiesz się, jak uzyskać te wartości.

Odczytywanie tabel czcionek

Metadane czcionki (a konkretnie jej tabele czcionek) zawierają wszystkie informacje potrzebne do obliczenia zastąpień danych czcionki.

Zrzut ekranu okna Informacje o czcionce w FontForge. W oknie dialogowym zostaną wyświetlone dane dotyczące czcionki, takie jak „Typo Ascent”, „Typo Descent” i „Linia błędu”.
Wyświetlanie metadanych czcionki za pomocą FontForge

Oto kilka narzędzi, za pomocą których możesz odczytywać metadane czcionki:

  • fontkit to silnik czcionek stworzony na potrzeby środowiska Node.js. Ten fragment kodu pokazuje, jak używać narzędzia Fontkit do obliczania zastąpień danych dotyczących czcionki.
  • Capsize to biblioteka rozmiarów i układów czcionek. Capsize zapewnia interfejs API służący do uzyskiwania informacji o różnych wskaźnikach czcionek.
  • fontdrop.info to witryna, która umożliwia wyświetlanie w przeglądarce tabel czcionek i innych informacji związanych z czcionkami.
  • Font Forge to popularny edytor czcionek. Aby wyświetlić ascent, descent i line-gap: otwórz okno Font Info, kliknij menu OS/2, a potem wybierz kartę Metrics. Aby wyświetlić UPM: otwórz okno Font Info i wybierz menu General.

Informacje o tabelach czcionek

Możesz zauważyć, że pojęcia takie jak „wzrost” odnoszą się do różnych danych, np. hheaAscent, typoAscent i winAscent. Jest to spowodowane tym, że różne systemy operacyjne stosują odmienne metody renderowania czcionek. Programy na urządzeniach z OS X korzystają zwykle z danych o czcionce hhea*, a na urządzeniach z systemem Windows – wartości typo* (nazywanej też sTypo*) lub win*.

W zależności od czcionki, przeglądarki i systemu operacyjnego czcionka będzie renderowana z użyciem danych hhea, typo lub win.

Mac Windows
Chromium Używa danych z tabeli „hhea”. Używa danych z tabeli „typo”, jeśli ustawiono „USE_TYPO_METRICS”, lub dane z tabeli „wygrane”.
Firefox Używa danych z tabeli „typo”, jeśli ustawiono „USE_TYPO_METRICS”, lub dane z tabeli „hhea”. Używa danych z tabeli „typo”, jeśli ustawiono „USE_TYPO_METRICS”, lub dane z tabeli „wygrane”.
Safari Używa danych z tabeli „hhea”. Używa danych z tabeli „typo”, jeśli ustawiono „USE_TYPO_METRICS”, lub dane z tabeli „wygrane”.

Więcej informacji o działaniu danych dotyczących 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 (na przykład ok. 90% czcionek hostowanych przez Google Fonts) można bezpiecznie używać zastąpień danych czcionek, nie znając systemu operacyjnego użytkownika. Inaczej mówiąc, wartości tych czcionek: ascent-override, descent-override i linegap-override pozostają dokładnie takie same niezależnie od tego, czy mają zastosowanie dane hhea, typo czy win. To repozytorium zawiera informacje o czcionkach, których to dotyczy, a których nie.

Jeśli używasz czcionki, która wymaga używania osobnych zestawów zastąpień danych czcionki na urządzeniach z systemem OS X i Windows, zalecamy używanie zastąpień danych dotyczących czcionki i size-adjust tylko wtedy, gdy masz możliwość zmiany arkuszy stylów w zależności od systemu operacyjnego użytkownika.

Korzystanie z zastąpień danych dotyczących czcionki

Zastąpienia danych dotyczących czcionki są obliczane na podstawie pomiarów pochodzących z metadanych czcionki internetowej (a nie czcionki zastępczej), dlatego pozostają one bez zmian 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 dostosowywanie rozmiaru

Wprowadzenie

Deskryptor CSS size-adjust proporcjonalnie skaluje szerokość i wysokość glifów czcionek. Na przykład size-adjust: 200% skaluje glify czcionek do dwukrotnie większego rozmiaru niż pierwotny, a size-adjust: 50% – do połowy oryginalnego rozmiaru.

Diagram pokazujący wyniki użycia atrybutów „size-customize: 50%” i „size-customize: 200%”.

Sama size-adjust ma pewne zastosowania w celu poprawy wartości zastępczych czcionek: w większości przypadków czcionka zastępcza musi zostać nieznacznie zwężona lub poszerzona (a nie proporcjonalnie skalowana), aby pasowała do czcionki internetowej. Połączenie atrybutu size-adjust z zastąpieniami danych dotyczących czcionki umożliwia jednak dopasowanie dowolnych 2 czcionek zarówno w poziomie, jak i w pionie.

Oto jak element size-adjust jest używany w arkuszach 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 atrybutu size-adjust (omówiony w następnej sekcji) wartość size-adjust (i odpowiadające im zastąpienia danych czcionki) zmienia się w zależności od użytej czcionki zastępczej:

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ń dostosowania rozmiaru i danych dotyczących czcionki

Oto równania obliczania zastąpień danych typu 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ść tych danych wejściowych (tj. wzrost, spadek i odstęp między wierszami) można odczytać bezpośrednio z metadanych czcionki internetowej. Wartość avgCharacterWidth należy jednak podać w przybliżeniu.

Przybliżona średnia szerokość znaków

Średnią szerokość znaków można z reguły podawać tylko w przybliżeniu, ale w niektórych przypadkach można ją dokładnie obliczyć, np. gdy używasz czcionki o stałej szerokości lub z wyprzedzeniem znana jest zawartość ciągu tekstowego.

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

Wykres porównujący szerokość poszczególnych glifów Roboto [a–zs].
Szerokość glifów Roboto

Jednak równomierne nałożenie wagi wszystkich znaków prawdopodobnie spowoduje zaniżenie szerokości często używanych liter (np. e) i przeciążenie używanych rzadko (np. z).

Bardziej skomplikowaną metodą, która zwiększa dokładność, jest uwzględnienie częstotliwości liter i obliczenie średniej szerokości ważonej według częstotliwości [a-z\s] znaków. Ten artykuł jest dobrym źródłem informacji o częstotliwości liter i średniej długości słów w tekstach w języku angielskim.

Wykres przedstawiający częstotliwość występowania liter w języku angielskim.
Częstotliwość listów w języku angielskim

Wybór metody

Obie metody omówione w tym artykule mają swoje zalety i wady:

  • Samodzielne stosowanie zastąpień danych czcionki to dobry sposób na rozpoczęcie optymalizacji kreacji zastępczych czcionek. Chociaż ta prostsza metoda jest prostsza, zwykle jest ona dość zaawansowana, by zauważalnie zmniejszyć skalę przesunięć układu związanej z czcionkami.

  • Z drugiej strony, jeśli zależy Ci na większej dokładności, a także chcesz wykonać więcej pracy i testować, dobrym rozwiązaniem będzie size-adjust. Prawidłowo zaimplementowane ta metoda może skutecznie wyeliminować przesunięcia układu związane z czcionkami.

Wybieranie czcionek zastępczych

Metody opisane w tym artykule polegają na wykorzystaniu zastąpień danych dotyczących czcionki i metodzie size-adjust do przekształcania powszechnie dostępnych czcionek lokalnych – nie są to próby znalezienia czcionki lokalnej, która jest bardzo zbliżona do czcionki internetowej. Przy wyborze czcionek lokalnych należy pamiętać, że bardzo mało czcionek jest powszechnie dostępnych lokalnie i żadna czcionka nie jest dostępna na wszystkich urządzeniach.

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

W przykładzie poniżej użyto 3 czcionek zastępczych, które zapewniają szeroki zasięg na urządzeniach z systemem Windows i Mac: czcionki zastępczej, która jest kierowana na urządzenia z Androidem, oraz czcionki zastępczej korzystającej z ogólnej 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ę

Skontaktuj się z nami, jeśli masz uwagi na temat korzystania z zastąpienia danych czcionek i usługi size-adjust.