Zusammenfassung
In diesem Artikel werden Schriftart-Fallbacks und die APIs von size-adjust
, ascent-override
, descent-override
und line-gap-override
ausführlich beschrieben. Mit diesen APIs ist es möglich, lokale Schriftarten zum Erstellen von Fallback-Schriftarten zu verwenden, die den Abmessungen einer Webschriftart ungefähr oder genau entsprechen. Dadurch werden Layoutverschiebungen reduziert oder vermieden, die durch das Austauschen von Schriftarten verursacht werden.
Wenn Sie diesen Artikel lieber überspringen möchten, finden Sie hier einige Tools, mit denen Sie diese APIs sofort nutzen können:
Framework-Tools:
- @next/font: Ab den nächsten 13 werden in
next/font
automatisch Überschreibungen von Schriftartenmesswerten undsize-adjust
verwendet, um passende Schriftart-Fallbacks bereitzustellen. - @nuxtjs/fontaine: Ab Nuxt 3 können Sie mit
nuxt/fontaine
automatisch übereinstimmende Schriftarten-Fallbacks generieren und in die von Ihrer Nuxt-App verwendeten Stylesheets einfügen.
Nicht-Framework-Tools:
- Fontaine: Fontaine ist eine Bibliothek, die automatisch Schriftart-Fallbacks generiert und einfügt, die Überschreibungen von Schriftartmesswerten verwenden.
- Dieses Repository enthält die Überschreibungen der Schriftartenmesswert für alle von Google Fonts gehosteten Schriftarten. Diese Werte können kopiert und in Ihre Stylesheets eingefügt werden.
Hintergrund
Eine Fallback-Schriftart ist eine Schriftart, die verwendet wird, wenn die primäre Schriftart noch nicht geladen wurde oder Glyphen fehlen, die zum Rendern von Seiteninhalten erforderlich sind. Das folgende CSS legt beispielsweise fest, dass die Schriftfamilie sans-serif
als Schriftart-Fallback für "Roboto"
verwendet werden soll.
font-family: "Roboto" , sans-serif;
Fallback-Schriftarten können verwendet werden, um Text schneller zu rendern, d. h. mithilfe von font-display: swap
. Dadurch sind Seiteninhalte früher lesbar und nützlich. Bisher ging dies jedoch zulasten des Layouts instabil: Layoutverschiebungen treten häufig auf, wenn eine Fallback-Schriftart gegen die Webschriftart ausgetauscht wird. Mit den unten beschriebenen neuen APIs kann dieses Problem jedoch reduziert oder eliminiert werden, indem es möglich ist, Fallback-Schriftarten zu erstellen, die genauso viel Platz wie ihre Gegenstücke für Webschriftarten einnehmen.
Verbesserte Schriftarten
Es gibt zwei Möglichkeiten, „verbesserte“ Schriftart-Fallbacks zu generieren. Bei der einfacheren Methode wird die API nur durch den Messwert „Schriftart“ überschrieben. Bei der komplizierteren (aber leistungsstärkeren) Methode werden sowohl der Messwert „Schriftart“ als auch die API und size-adjust
überschrieben. In diesem Artikel werden diese beiden Ansätze erläutert.
Überschreibungen von Schriftmesswerten
Einleitung
Überschreibungen von Schriftmesswerten bieten eine Möglichkeit, die Höhe, Abwärtsrichtung und Linienabstand einer Schriftart zu überschreiben:
- Bei der Aufwärtsrichtung wird die geringste Entfernung gemessen, um die sich die Glyphen einer Schriftart über der Grundlinie erstrecken.
- Mit Desient wird die geringste Entfernung gemessen, um die sich die Glyphen einer Schriftart unter dem Basiswert erstrecken.
- Mit dem Linienabstand, der auch als "führend" bezeichnet wird, wird der Abstand zwischen aufeinanderfolgenden Textzeilen gemessen.
Überschreibungen von Schriftwerten können verwendet werden, um die Höhen-, Abwärts- und Linienabstand einer Fallback-Schriftart zu überschreiben, um sie an die Höhen-, Abwärts- und Zeilenabstand der Webschriftart anzupassen. Dadurch haben die Webschriftart und die angepasste Fallback-Schriftart immer die gleichen vertikalen Abmessungen.
Überschreibungen von Schriftwerten werden in einem Stylesheet wie folgt verwendet:
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%;
}
Mit den am Anfang dieses Artikels aufgeführten Tools können Sie die richtigen Überschreibungswerte für Schriftartmesswerte generieren. Sie können diese Werte jedoch auch selbst berechnen.
Überschreibungen von Schriftmesswerten berechnen
Die folgenden Gleichungen ergeben die Überschreibungen von Schriftmetriken für eine bestimmte Webschrift. Die Überschreibungswerte für Schriftarten sollten als Prozentsätze (z. B. 105%
) und nicht als Dezimalzahlen angegeben werden.
ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm
Hier sehen Sie beispielsweise die Überschreibungen der Messwerte für Schriftarten für die Schriftart 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 */
Die Werte von ascent
, descent
, line-gap
und unitsPerEm
stammen alle aus den Metadaten der Webschriftart. Im nächsten Abschnitt dieses Artikels wird erläutert, wie Sie diese Werte abrufen.
Schriftartentabellen werden gelesen
Die Metadaten einer Schriftart, insbesondere die Schrifttabellen, enthalten alle Informationen, die Sie zum Berechnen der Überschreibungen der Schriftmesswerte benötigen.
![Screenshot des Dialogfelds „Font Information“ (Schriftartinformationen) in FontForge. Im Dialogfeld werden Messwerte für Schriftarten wie „Typo Ascent“, „Typo Descent“ und „Typo Line Gap“ angezeigt.](https://developer.chrome.com/static/blog/font-fallbacks/image/screenshot-the-font-info-bf9832673113a.png?authuser=6&hl=de)
Hier sind einige Tools, mit denen Sie die Metadaten einer Schriftart lesen können:
- fontkit ist eine für Node.js entwickelte Schriftart-Engine. In diesem Code-Snippet wird gezeigt, wie Sie mit Fontkit Überschreibungen von Schriftmesswerten berechnen.
- Capsize ist eine Bibliothek zur Größenanpassung und Layoutgestaltung. Capsize bietet eine API, mit der Sie Informationen zu verschiedenen Schriftmesswerten abrufen können.
- fontdrop.info ist eine Website, auf der Sie Schriftartentabellen und andere schriftartbezogene Informationen im Browser ansehen können.
- Font Forge ist ein beliebter Editor für Desktop-Schriftarten. Wenn Sie
ascent
,descent
undline-gap
aufrufen möchten, öffnen Sie das DialogfeldFont Info
, wählen Sie das MenüOS/2
und dann den TabMetrics
aus. Wenn SieUPM
aufrufen möchten, öffnen Sie das DialogfeldFont Info
und wählen Sie das MenüGeneral
aus.
Informationen zu Schriftartentabellen
Sie stellen möglicherweise fest, dass auf Konzepte wie "Anstieg" durch mehrere Messwerte Bezug genommen wird, z. B. gibt es die Messwerte hheaAscent
, typoAscent
und winAscent
. Das liegt daran, dass verschiedene Betriebssysteme unterschiedliche Ansätze für das Rendern von Schriftarten verfolgen: Programme auf OSX-Geräten verwenden in der Regel hhea*
-Messwerte für die Schriftart, während Programme auf Windows-Geräten in der Regel typo*
(auch als sTypo*
bezeichnet) oder win*
-Schriftartmesswerte verwenden.
Je nach Schriftart, Browser und Betriebssystem wird eine Schriftart mithilfe der Messwerte hhea
, typo
oder win
gerendert.
Mac | Windows | |
Chromium | Es werden Messwerte aus der Tabelle „hhea“ verwendet. | Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet. |
Firefox | Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „hhea“ verwendet. | Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet. |
Safari | Es werden Messwerte aus der Tabelle „hhea“ verwendet. | Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet. |
Weitere Informationen zur Funktionsweise der Messwerte für Schriftarten auf verschiedenen Betriebssystemen finden Sie in diesem Artikel zu Branchenmesswerten.
Geräteübergreifende Kompatibilität
Bei den meisten Schriftarten (z. B. bei ca. 90% der von Google Fonts gehosteten Schriftarten) können Überschreibungen von Schriftartenmesswerten sicher verwendet werden, ohne dass das Betriebssystem des Nutzers bekannt ist. Mit anderen Worten: Für diese Schriftarten bleiben die Werte von ascent-override
, descent-override
und linegap-override
immer gleich, unabhängig davon, ob die Messwerte hhea
, typo
oder win
gelten. Dieses Repository enthält Informationen darüber, für welche Schriftarten dies gilt und nicht.
Wenn Sie eine Schriftart verwenden, für die separate Überschreibungen von Schriftmesswerten für OS X- und Windows-Geräte erforderlich sind, wird die Verwendung von Überschreibungen von Schriftmesswerten und size-adjust
nur dann empfohlen, wenn Sie die Möglichkeit haben, Ihre Stylesheets je nach Betriebssystem des Nutzers zu ändern.
Überschreibungen von Schriftmesswerten verwenden
Da Überschreibungen von Schriftmesswerten aus den Metadaten der Webschriftart (und nicht der Fallback-Schriftart) stammen, bleiben sie gleich, unabhängig davon, welche Schriftart als Fallback-Schriftart verwendet wird. Beispiel:
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%;
}
So funktioniert die Größenanpassung
Einleitung
Mit dem CSS-Deskriptor size-adjust
werden Breite und Höhe von Schriftsymbolen proportional skaliert. Mit size-adjust: 200%
werden Schriftsymbole beispielsweise auf die doppelte Originalgröße skaliert und mit size-adjust: 50%
auf die Hälfte ihrer Originalgröße.
Für size-adjust
selbst gibt es nur wenige Anwendungen zur Verbesserung von Schriftart-Fallbacks: In den meisten Fällen muss eine Fallback-Schriftart verengt oder vergrößert werden (anstatt proportional zu skalieren), damit sie einer Webschriftart entspricht. Wenn du size-adjust
jedoch mit Überschreibungen von Schriftmesswerten kombinierst, können zwei Schriftarten sowohl horizontal als auch vertikal übereinstimmen.
So wird size-adjust
in Stylesheets verwendet:
@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%;
}
Aufgrund der Berechnung von size-adjust
(wird im nächsten Abschnitt erläutert) ändert sich der Wert von size-adjust
(und der entsprechende Messwert für die Schriftart überschreibt) je nachdem, welche Fallback-Schriftart verwendet wird:
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%;
}
Überschreibungen von Größenanpassungs- und Schriftmesswerten berechnen
Dies sind die Gleichungen für die Berechnung von size-adjust
- und Schriftartmesswert-Überschreibungen:
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)
Die meisten dieser Eingaben, d. h. Steigung, Abstieg und Linienabstand, können direkt aus den Metadaten der Webschriftart ausgelesen werden. avgCharacterWidth
muss jedoch näherungsweise angegeben werden.
Ungefähre durchschnittliche Zeichenbreite
In der Regel lässt sich die durchschnittliche Zeichenbreite nur annähernd ermitteln. Es gibt jedoch einige Szenarien, in denen sie genau berechnet werden kann, z. B. bei Verwendung einer Schriftart mit Leerzeichen oder wenn der Inhalt einer Textzeichenfolge im Voraus bekannt ist.
Ein Beispiel für eine naive Berechnung von avgCharacterWidth
besteht darin, die durchschnittliche Breite aller [a-z\s]
-Zeichen zu verwenden.
![Diagramm zum Vergleich der Breite der einzelnen Roboto-Glyphen [a–zs].](https://developer.chrome.com/static/blog/font-fallbacks/image/graph-comparing-width-5672b4755732f.png?authuser=6&hl=de)
Wenn alle Zeichen gleich gewichtet werden, ist es jedoch wahrscheinlich, dass die Breite häufig verwendeter Buchstaben (z. B. e
) zu niedrig und weniger häufig verwendete Buchstaben (z. B. z
) zu breit gefasst sind.
Ein komplexerer Ansatz zur Verbesserung der Genauigkeit besteht darin, die Buchstabenhäufigkeit zu berücksichtigen und stattdessen die häufigkeitsgewichtete durchschnittliche Breite von [a-z\s]
Zeichen zu berechnen. Dieser Artikel ist eine gute Referenz für die Buchstabenhäufigkeit und durchschnittliche Wortlänge englischsprachiger Texte.
![Ein Diagramm, das die Häufigkeit von Buchstaben für Englisch zeigt.](https://developer.chrome.com/static/blog/font-fallbacks/image/a-graph-showing-letter-fr-ac59861459ed1.png?authuser=6&hl=de)
Ansatz auswählen
Die beiden in diesem Artikel beschriebenen Ansätze haben jeweils Vor- und Nachteile:
Wenn Sie mit der Optimierung Ihrer Schriftart-Fallbacks beginnen, empfiehlt es sich, Schriftartmesswert-Überschreibungen alleine zu verwenden. Obwohl dies der einfachere der beiden Ansätze ist, ist er in der Regel leistungsstark genug, um das Ausmaß der schriftbezogenen Layoutverschiebungen merklich zu reduzieren.
Wenn Sie jedoch mehr Präzision möchten und bereit sind, etwas mehr Arbeit und Tests durchzuführen, ist es eine gute Idee,
size-adjust
zu verwenden. Bei korrekter Implementierung lassen sich so schriftbezogene Layoutverschiebungen effektiv eliminieren.
Fallback-Schriftarten auswählen
Die in diesem Artikel beschriebenen Techniken basieren auf der Verwendung von Überschreibungen von Schriftartenmesswerten und size-adjust
, um allgemein verfügbare lokale Schriftarten umzuwandeln, anstatt auf den Versuch, eine lokale Schriftart zu finden, die der Webschriftart sehr nahe kommt. Bei der Auswahl lokaler Schriftarten ist zu beachten, dass nur sehr wenige Schriftarten überall verfügbar sind und keine einzelne Schriftart auf allen Geräten vorhanden ist.
Arial
ist die empfohlene Fallback-Schriftart für Sans-Serif-Schriftarten und Times New Roman
die empfohlene Fallback-Schriftart für Serifenschriften. Keine dieser Schriftarten ist unter Android jedoch verfügbar. Roboto
ist die einzige Systemschriftart unter Android.
Im folgenden Beispiel werden drei Fallback-Schriftarten verwendet, um eine breite Geräteabdeckung sicherzustellen: eine Fallback-Schriftart, die auf Windows- und Mac-Geräte ausgerichtet ist, eine Fallback-Schriftart, die auf Android-Geräte ausgerichtet ist, und eine Fallback-Schriftart, die eine allgemeine Schriftfamilie verwendet.
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%;
}
Bitte um Feedback
Wenn Sie Feedback zur Überschreibung von Schriftartenmesswerten und zu size-adjust
haben, können Sie sich gern an uns wenden.