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 isize-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.
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.
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
iline-gap
: otwórz oknoFont Info
, kliknij menuOS/2
, a potem wybierz kartęMetrics
. Aby wyświetlićUPM
: otwórz oknoFont Info
i wybierz menuGeneral
.
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.
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.
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.
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
.