Verbesserte Schriftarten-Fallbacks

Katie Hempenius

Zusammenfassung

In diesem Artikel erfahren Sie mehr über Schrift-Fallbacks und die APIs size-adjust, ascent-override, descent-override und line-gap-override. Mit diesen APIs können Sie mithilfe lokaler Schriftarten Fallback-Schriftschnitte erstellen, die den Abmessungen einer Webschriftart weitgehend oder genau entsprechen. Dadurch werden Layoutverschiebungen durch das Austauschen von Schriftarten reduziert oder eliminiert.

Wenn Sie diesen Artikel nicht lesen möchten, können Sie die folgenden Tools verwenden, um diese APIs sofort zu verwenden:

Framework-Tools:

• @next/font: Ab Next 13 verwendet next/font automatisch Überschreibungen von Schriftartmesswerten und size-adjust, um passende Schriftart-Fallbacks bereitzustellen.
• @nuxtjs/fontaine: Ab Nuxt 3 können Sie mit nuxt/fontaine automatisch passende Schrift-Fallbacks generieren und in die Stylesheets Ihrer Nuxt-App einfügen.

Nicht zu Frameworks gehörende Tools:

• Fontaine: Fontaine ist eine Bibliothek, die automatisch Schrift-Fallbacks generiert und einfügt, die Schriftmetrik-Überschreibungen verwenden.
• Dieses repo enthält die Überschreibungen für Schriftmetriken für alle Schriftarten, die von Google Fonts gehostet werden. Diese Werte können kopiert und in Ihre Stylesheets eingefügt werden.

Hintergrund

Ein Fallback-Schriftschnitt ist ein Schriftschnitt, der verwendet wird, wenn der primäre Schriftschnitt noch nicht geladen wurde oder Glyphen fehlen, die zum Rendern des Seiteninhalts erforderlich sind. Im folgenden CSS wird beispielsweise angegeben, dass die Schriftfamilie sans-serif als Schrift-Fallback für "Roboto" verwendet werden soll.

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

Mit Fallback-Schriftarten kann Text schneller gerendert werden (d. h. mit font-display: swap). Dadurch sind die Seiteninhalte früher lesbar und nützlich. Bisher ging dies jedoch zu Lasten der Layoutstabilität: Layoutänderungen treten häufig auf, wenn eine Fallback-Schriftart durch die Webschriftart ersetzt wird. Die unten beschriebenen neuen APIs können dieses Problem jedoch reduzieren oder beseitigen, da damit Fallback-Schriftschnitte erstellt werden können, die genauso viel Speicherplatz belegen wie ihre Webschrift-Entsprechungen.

Verbesserte Schrift-Fallbacks

Es gibt zwei Möglichkeiten, „optimierte“ Schrift-Fallbacks zu generieren. Der einfachere Ansatz verwendet nur die API für Schriftschnitt-Überschreibungen. Der kompliziertere (aber leistungsstärkere) Ansatz verwendet sowohl die API für Schriftschnitt-Überschreibungen als auch size-adjust. In diesem Artikel werden beide Ansätze erläutert.

Funktionsweise von Überschreibungen für Schriftmetriken

Einführung

Mit Überschreibungen von Schriftmetriken können Sie den Auf- und Abstieg sowie den Zeilenabstand einer Schrift überschreiben:

• Der Aufstieg gibt an, wie weit die Zeichen eines Schriftbilds über die Grundlinie hinausragen.
• Der Abstieg ist der maximale Abstand, um den sich die Glyphen eines Schriftbilds unter der Grundlinie erstrecken.
• Der Zeilenabstand, auch als „Löschabstand“ bezeichnet, ist der Abstand zwischen aufeinanderfolgenden Textzeilen.

Mit Überschreibungen von Schriftmesswerten können Sie den Aufstieg, den Abstieg und den Zeilenabstand einer Fallback-Schriftart überschreiben, damit sie mit dem Aufstieg, dem Abstieg und dem Zeilenabstand der Webschriftart übereinstimmen. Daher haben die Webschriftart und die angepasste Fallback-Schriftart immer dieselben vertikalen Abmessungen.

Overrides für Schriftmetriken werden in einem Stylesheet wie diesem 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 Tools, die am Anfang dieses Artikels aufgeführt sind, können Sie die richtigen Werte für die Schriftmetrik-Überschreibungen generieren. Sie können diese Werte aber auch selbst berechnen.

Überschreibungen für Schriftmesswerte berechnen

Die folgenden Gleichungen ergeben die Schriftmetrik-Überschreibungen für eine bestimmte Webschrift. Die Werte der Schriftmetrik-Überschreibungen 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 sind beispielsweise die Schriftmetrik-Überschreibungen 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 für ascent, descent, line-gap und unitsPerEm stammen aus den Metadaten der Webschriftart. Im nächsten Abschnitt dieses Artikels wird beschrieben, wie Sie diese Werte erhalten.

Schrifttabellen lesen

Die Metadaten eines Schriftzugs (insbesondere die Schrifttabellen) enthalten alle Informationen, die Sie zum Berechnen der Überschreibungen der Schriftmetriken benötigen.

Hier sind einige Tools, mit denen Sie die Metadaten eines Schriftbilds lesen können:

• fontkit ist eine Schriftarten-Engine, die für Node.js entwickelt wurde. In diesem Code-Snippet wird gezeigt, wie Sie mit FontKit Überschreibungen für Schriftmetriken berechnen.
• Capsize ist eine Bibliothek für die Schriftgröße und das Layout. Capsize bietet eine API, mit der Informationen zu verschiedenen Schriftmetriken abgerufen werden können.
• Auf der Website fontdrop.info können Sie Schrifttabellen und andere schriftbezogene Informationen im Browser aufrufen.
• Font Forge ist ein beliebter Desktop-Schrifteditor. So rufen Sie ascent, descent und line-gap auf: Öffnen Sie das Dialogfeld Font Info, wählen Sie das Menü OS/2 und dann den Tab Metrics aus. So rufen Sie UPM auf: Öffnen Sie das Dialogfeld Font Info und wählen Sie das Menü General aus.

Schrifttabellen

Sie werden feststellen, dass Konzepte wie „Aufstieg“ auf mehrere Messwerte verweisen. Es gibt beispielsweise die Messwerte hheaAscent, typoAscent und winAscent. Das liegt daran, dass verschiedene Betriebssysteme unterschiedliche Ansätze für das Schriftbild-Rendering verfolgen: Programme auf OSX-Geräten verwenden in der Regel hhea*-Schriftmetriken, während Programme auf Windows-Geräten in der Regel typo* (auch sTypo* genannt) oder win*-Schriftmetriken verwenden.

Je nach Schriftart, Browser und Betriebssystem wird eine Schriftart entweder mit hhea-, typo- oder win-Messverfahren gerendert.

Weitere Informationen dazu, wie Schriftmesswerte plattformübergreifend funktionieren, finden Sie in diesem Artikel zu vertikalen Messwerten.

Geräteübergreifende Kompatibilität

Bei der überwiegenden Mehrheit der Schriftarten (z. B. bei etwa 90% der von Google Fonts gehosteten Schriftarten) können Überschreibungen von Schriftmetriken verwendet werden, ohne das Betriebssystem des Nutzers zu kennen. Mit anderen Worten: Bei diesen Schriftarten bleiben die Werte von ascent-override, descent-override und linegap-override genau gleich, unabhängig davon, ob hhea-, typo- oder win-Messwerte gelten. In diesem repo finden Sie Informationen dazu, für welche Schriftarten dies gilt und für welche nicht.

Wenn Sie eine Schriftart verwenden, für die separate Schriftmetrik-Überschreibungen für OSX- und Windows-Geräte erforderlich sind, wird die Verwendung von Schriftmetrik-Überschreibungen und size-adjust nur empfohlen, wenn Sie Ihre Stylesheets je nach Betriebssystem des Nutzers variieren können.

Überschreibungen für Schriftmesswerte verwenden

Da Schriftmetrik-Überschreibungen anhand von Messungen aus den Metadaten der Webschrift (und nicht der Fallback-Schrift) berechnet werden, bleiben sie unabhängig davon gleich, welche Schrift als Fallback-Schrift 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%;
}

Funktionsweise der Größenanpassung

Einführung

Mit dem CSS-Beschreibungselement size-adjust werden Breite und Höhe von Schriftzeichen proportional skaliert. Mit size-adjust: 200% werden Schriftzeichen beispielsweise auf das Doppelte ihrer ursprünglichen Größe skaliert, mit size-adjust: 50% auf die Hälfte.

size-adjust kann allein nur bedingt zur Verbesserung von Schrift-Fallbacks verwendet werden: In den meisten Fällen muss eine Fallback-Schrift leicht verengt oder verbreitert werden (anstatt proportional skaliert zu werden), um mit einer Webschrift übereinzustimmen. Wenn Sie size-adjust jedoch mit Überschreibungen für Schriftmetriken kombinieren, können Sie zwei beliebige Schriftarten sowohl horizontal als auch vertikal aufeinander abstimmen.

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 (wie im nächsten Abschnitt erläutert) ändert sich der Wert von size-adjust (und die entsprechenden Schriftmetrik-Überschreibungen) je nachdem, welche Fallback-Schrift 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 für die Größenanpassung und Schriftmetriken berechnen

Hier sind die Gleichungen zur Berechnung von size-adjust und Schriftmetrik-Ü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. Auf-, Abstieg und Zeilenabstand) können direkt aus den Metadaten der Webschrift gelesen werden. avgCharacterWidth muss jedoch geschätzt werden.

Durchschnittliche Zeichenbreite approximieren

Im Allgemeinen kann die durchschnittliche Zeichenbreite nur geschätzt werden. Es gibt jedoch einige Szenarien, in denen sie genau berechnet werden kann, z. B. bei der Verwendung einer monospaced-Schriftart oder wenn der Inhalt eines Textstrings im Voraus bekannt ist.

Ein Beispiel für einen naiven Ansatz zur Berechnung von avgCharacterWidth ist die durchschnittliche Breite aller [a-z\s]-Zeichen.

Wenn Sie jedoch alle Zeichen gleich gewichten, ist die Breite häufig verwendeter Buchstaben (z. B. e) wahrscheinlich zu gering und die Breite selten verwendeter Buchstaben (z. B. z) zu groß.

Ein komplexerer Ansatz, der die Genauigkeit verbessert, besteht darin, die Buchstabenhäufigkeit zu berücksichtigen und stattdessen die frequenzgewichtete durchschnittliche Breite von [a-z\s]-Zeichen zu berechnen. Dieser Artikel ist eine gute Referenz für die Buchstabenhäufigkeit und die durchschnittliche Wortlänge englischer Texte.

Ansatz auswählen

Die beiden in diesem Artikel beschriebenen Ansätze haben jeweils Vor- und Nachteile:

• Die Verwendung von Überschreibungen von Schriftartmesswerten ist ein guter Ansatz, wenn Sie mit der Optimierung Ihrer Schriftart-Fallbacks beginnen. Dieser Ansatz ist zwar der einfachere der beiden, aber in der Regel leistungsstark genug, um die Auswirkungen schriftbezogener Layoutverschiebungen deutlich zu reduzieren.

• Wenn Sie hingegen eine höhere Genauigkeit wünschen und bereit sind, etwas mehr Arbeit und Tests zu investieren, ist die Einbindung von size-adjust ein guter Ansatz. Bei richtiger Implementierung kann dieser Ansatz schriftbezogene Layoutänderungen effektiv beseitigen.

Fallback-Schriftarten auswählen

Bei den in diesem Artikel beschriebenen Techniken werden Überschreibungen von Schriftmetriken und size-adjust verwendet, um weit verbreitete lokale Schriftarten zu transformieren, anstatt zu versuchen, eine lokale Schriftart zu finden, die der Webschriftart möglichst nahekommt. Bei der Auswahl lokaler Schriftarten ist zu beachten, dass nur sehr wenige Schriftarten weithin lokal verfügbar sind und es keine Schriftart gibt, die auf allen Geräten vorhanden ist.

Arial ist die empfohlene Fallback-Schriftart für serifenlose Schriftarten und Times New Roman die empfohlene Fallback-Schriftart für Serifenschriften. Keine dieser Schriftarten ist jedoch auf Android-Geräten verfügbar. Roboto ist die einzige Systemschriftart unter Android.

Im folgenden Beispiel werden drei Fallback-Schriftarten verwendet, um eine breite Geräteabdeckung zu gewährleisten: eine Fallback-Schriftart, die auf Windows-/Mac-Geräte ausgerichtet ist, eine Fallback-Schriftart, die auf Android-Geräte ausgerichtet ist, und eine Fallback-Schriftart, die eine generische Schriftartfamilie 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%;
}

Feedback anfordern

Bitte wenden Sie sich an uns, wenn Sie Feedback zu den Überschreibungen von Schriftmetriken und size-adjust haben.