Ulepszone ustawienia zastępcze czcionek

Katie Hempenius

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 czcionek lokalnych do tworzenia zastępczych krojów czcionek, które dokładnie lub bardzo pasują do wymiarów czcionki internetowej. Ogranicza to lub eliminuje przesunięcia układu związane z zamianą czcionek.

Jeśli chcesz pominąć ten artykuł, zapoznaj się z tymi narzędziami, które pomogą Ci od razu zacząć korzystać z tych interfejsów API:

Narzędzia do tworzenia ramek:

• @next/font od następnego wydania 13 next/font automatycznie korzysta z zastąpień danych czcionek i size-adjust do dostarczania pasujących kreacji zastępczych.
• @nuxtjs/fontaine od Nuxt 3 możesz używać nuxt/fontaine do automatycznego generowania i wstawiania pasujących czcionek zastępczych do arkuszy stylów używanych przez aplikację Nuxt.

Narzędzia niekorzystające z platformy:

• Fontaine: Fontaine to biblioteka, która automatycznie generuje i wstawia zastępcze czcionki, które korzystają z zastąpienia danych czcionek.
• To repozytorium zawiera zastąpienia danych czcionek dla wszystkich czcionek hostowanych przez Google Fonts. Wartości te można skopiować i wkleić do arkuszy stylów.

Tło

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

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

Czcionek zastępczych można użyć do szybszego renderowania tekstu (czyli za pomocą funkcji font-display: swap). W efekcie treść strony jest wcześniej czytelna i przydatna, ale do tej pory było to związane z niestabilnością układu: do zmian w układzie zwykle dochodzi, gdy w zastępstwie czcionki zastępczej wyświetlana jest czcionka internetowa. Jednak nowe interfejsy API opisane poniżej mogą ograniczyć lub wyeliminować ten problem, umożliwiając tworzenie zastępczych krojów czcionek, które zajmują taką samą ilość miejsca jak ich odpowiedniki na potrzeby czcionek internetowych.

Ulepszone opcje kreacji zastępczych czcionek

Są 2 sposoby na zwiększanie skuteczności czcionki zastępcze. Prostsza metoda korzysta tylko z interfejsu API zastąpień wskaźników czcionkami. Bardziej skomplikowane (ale bardziej skuteczne) rozwiązanie wykorzystuje zarówno dane o czcionce, jak i interfejs API size-adjust. W tym artykule opisujemy obie te metody.

Jak działa zastępowanie danych o czcionkach

Wprowadzenie

Zastąpienia danych czcionki umożliwiają zastępowanie ustawień wzniesienia, opadania i przerw między wierszami czcionki:

• Ascent to pomiar największej odległości, jaką glify czcionki wykraczają poza punkt odniesienia.
• Spadek mierzy największą odległość, jaką glify czcionki rozszerzają się poniżej linii bazowej.
• Odstęp między wierszami, zwany też „odstępem”, mierzy odległość między kolejnymi wierszami tekstu.

Zastąpienia danych czcionki mogą służyć do zastępowania ustawień wzniesienia, opadania i przerw między wierszami czcionki zastępczej, aby zapewnić zgodność ze wzrostem, zejściem i przerwą w wierszu czcionki internetowej. Dlatego 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 mogą generować prawidłowe wartości zastąpień danych czcionek. Możesz jednak samodzielnie obliczyć te wartości.

Obliczanie zastąpień wskaźnika czcionki

Poniższe równania zapewniają zastąpienia danych czcionki dla danej czcionki internetowej. Wartości zastąpień wskaźników czcionki powinny być zapisywane w procentach (np. 105%), a nie ułamkach dziesiętnych.

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

Oto np. zastąpienia 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 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 czcionek.

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

• fontkit to silnik czcionek stworzony na potrzeby Node.js. Ten fragment kodu pokazuje, jak używać fontkit do obliczania zastąpień danych czcionek.
• Capsize to biblioteka do określania rozmiarów i układów czcionek. Capsize udostępnia interfejs API umożliwiający uzyskiwanie informacji o różnych danych dotyczących czcionek.
• fontdrop.info to witryna, która umożliwia wyświetlanie tabel czcionek oraz innych informacji o czcionkach w przeglądarce.
• Font Forge to popularny edytor czcionek na komputery. Aby wyświetlić ascent, descent i line-gap: otwórz okno Font Info, wybierz menu OS/2, a następnie kliknij kartę Metrics. Aby wyświetlić UPM: otwórz okno dialogowe Font Info, a następnie wybierz menu General.

Omówienie tabel czcionek

Możesz zauważyć, że takie pojęcia jak „wspinaczka” są wywoływane przez wiele danych, np. dane hheaAscent, typoAscent i winAscent. Wynika to z faktu, że różne systemy operacyjne stosują różne podejście do renderowania czcionek. Programy na urządzeniach z OS X zwykle korzystają z danych dotyczących czcionek hhea*, podczas gdy programy na urządzeniach z systemem Windows zwykle używają typo* (nazywanego też sTypo*) lub win*.

W zależności od czcionki, przeglądarki i systemu operacyjnego czcionka jest renderowana na podstawie wartości hhea, typo lub win.

Więcej informacji o działaniu danych o czcionkach w różnych systemach operacyjnych znajdziesz w tym artykule o danych pionowych.

Zgodność z różnymi urządzeniami

W przypadku przeważającej większości czcionek (np. ok. 90% czcionek hostowanych przez Google Fonts) można bezpiecznie używać zastąpień danych o czcionkach bez znajomości systemu operacyjnego użytkownika. Inaczej mówiąc, 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. To repozytorium zawiera informacje o czcionkach, których dotyczy problem, a których nie.

Jeśli używasz czcionki, która wymaga oddzielnych zestawów zastąpień danych czcionki na urządzeniach z systemem OS X i Windows, zalecamy zastąpienie danych czcionki. Ustawienie size-adjust jest zalecane tylko wtedy, gdy możesz zmieniać arkusze stylów w zależności od systemu operacyjnego użytkownika.

Zastąpienia danych czcionek

Zastąpienia danych o czcionce są obliczane na podstawie pomiarów pochodzących z metadanych czcionki internetowej (a nie czcionki zastępczej), więc pozostają one takie same niezależnie od tego, która czcionka zostanie użyta 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 skaluje szerokość i wysokość glifów czcionek proporcjonalnie. Na przykład funkcja size-adjust: 200% skaluje glify czcionek do dwukrotności ich oryginalnego rozmiaru. size-adjust: 50% skaluje glify czcionek do połowy ich oryginalnego rozmiaru.

Samo size-adjust ma ograniczone zastosowania, które poprawiają błędy kreacji zastępczych. W większości przypadków czcionka zastępcza musi zostać lekko zwężona lub poszerzona (zamiast proporcjonalnie), aby pasowała do czcionki internetowej. Połączenie atrybutu size-adjust z zastąpieniami danych o czcionkach pozwala jednak dopasować do siebie dowolne 2 czcionki zarówno w poziomie, jak i w pionie.

Metoda size-adjust jest używana 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 parametru size-adjust (co zostało wyjaśnione w następnej sekcji), wartość parametru size-adjust (i odpowiednie 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ń ustawień rozmiaru i danych czcionek

Oto równania służące do obliczania zastąpień danych size-adjust i danych czcionek:

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. wejście, zejście i odstęp liniowy) można odczytać bezpośrednio z metadanych czcionki internetowej. Wartość avgCharacterWidth musi być jednak przybliżona.

Przybliżona średnia szerokość znaków

Ogólnie średnia szerokość znaków może być tylko przybliżona, ale w niektórych sytuacjach można to obliczyć dokładnie, np. gdy używasz czcionki o stałej szerokości lub gdy zawartość ciągu tekstowego jest znana z wyprzedzeniem.

Przykładem najawnego sposobu obliczania wartości avgCharacterWidth jest przyjęcie średniej szerokości wszystkich znaków ([a-z\s]).

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

Bardziej złożona metoda, która pozwala zwiększyć dokładność, polega na obliczeniu częstotliwości liter i obliczaniu średniej szerokości ważonej według częstotliwości wynoszącej [a-z\s] znaków. Ten artykuł zawiera informacje o częstotliwości liter i średniej długości słów w tekstach w języku angielskim.

Wybór podejścia

Oba podejścia omawiane w tym artykule mają swoje wady i zalety:

• Samodzielne zastępowanie danych o czcionkach jest dobrym rozwiązaniem, gdy zaczynasz optymalizować wartości zastępczych czcionek. Chociaż jest to prostsza z tych 2 metod, zwykle jest na tyle skuteczna, że znacznie ogranicza zmiany układu związane z czcionkami.

• Z drugiej strony, jeśli zależy Ci na większej precyzji i chcesz wykonać więcej zadań oraz przeprowadzać testy, dobrym rozwiązaniem będzie wdrożenie size-adjust. Prawidłowo wdrożone rozwiązanie pozwala wyeliminować przesunięcia układu związane z czcionkami.

Wybór czcionek zastępczych

Techniki opisane w tym artykule polegają na użyciu zastąpień danych czcionek i funkcji size-adjust do przekształcenia powszechnie dostępnych czcionek lokalnych, a nie z prób znalezienia lokalnej czcionki, która dobrze zbliży się do czcionki internetowej. Wybierając czcionki lokalne, należy pamiętać, że tylko niewiele czcionek jest powszechnie dostępnych i nie jest dostępna na wszystkich urządzeniach.

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

W przykładzie poniżej użyto 3 czcionek zastępczych, aby zapewnić szeroki zasięg urządzeń: czcionki zastępczej, która jest kierowana na urządzenia z systemem Windows lub Mac, czcionki zastępczej, która jest kierowana na urządzenia z Androidem, oraz czcionki zastępczej, która korzysta z generatywnej 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ąpienia danych czcionek i elementu size-adjust, skontaktuj się z nami.