Ulepszone ustawienia zastępcze czcionek

Katie Hempenius
Katie Hempenius
X

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.

Wprowadzenie

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;

Czcionki zastępcze mogą służyć do szybszego renderowania tekstu (czyli za pomocą funkcji font-display: swap). Dzięki temu zawartość strony jest wcześniej czytelna i przydatna, jednak dotychczas stanowiło to efekt niestabilności układu – przesunięcia układu często mają miejsce, gdy w zastępstwie czcionki zastępczej używana jest czcionka internetowa. Omówione poniżej nowe interfejsy API mogą jednak 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

Istnieją 2 sposoby generowania „poprawionych” kreacji zastępczych czcionek. 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:

  • Wyjście 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.

Diagram przedstawiający wchodzenie, zejście i przerwa w linii czcionki.

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ąpienia 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.

Zrzut ekranu okna Font Information (Informacje o czcionce) w FontForge. W oknie dialogowym zostaną wyświetlone dane dotyczące czcionek, takie jak „Typo Ascent”, „Typo Descent” i „Typo Line Line” (Odstęp błędu).
Wyświetlanie metadanych czcionek za pomocą FontForge

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 do pojęć takich jak „wzrost” odnosi się wiele danych – na przykład są to 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.

Mac Windows
Chromium Wykorzystuje dane z tabeli „achhea”. Jeśli ustawiono dane „USE_TYPO_METRICS”, korzysta z danych z tabeli „typo”. W przeciwnym razie korzysta z danych z tabeli „wygrana”.
Firefox Jeśli ustawiono dane „USE_TYPO_METRICS”, korzysta z danych z tabeli „typo”. W przeciwnym razie korzysta z danych z tabeli „hhea”. Jeśli ustawiono dane „USE_TYPO_METRICS”, korzysta z danych z tabeli „typo”. W przeciwnym razie korzysta z danych z tabeli „wygrana”.
Safari Wykorzystuje dane z tabeli „achhea”. Jeśli ustawiono dane „USE_TYPO_METRICS”, korzysta z danych z tabeli „typo”. W przeciwnym razie korzysta z danych z tabeli „wygrana”.

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 pierwotnego rozmiaru, a size-adjust: 50% skaluje je do połowy ich pierwotnego rozmiaru.

Diagram przedstawiający wyniki zastosowania atrybutów „size-Adjust: 50%” i „size-Adjust: 200%”

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]).

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

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.

Wykres pokazujący częstotliwość występowania liter w języku angielskim.
Częstotliwość liter 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.