Verbesserte Schriftarten-Fallbacks

Katie Hempenius
Katie Hempenius
X

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 und size-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.

Diagramm, das Steigung, Abstieg und Linienabstand einer Schriftart zeigt.

Ü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.
Schriftart-Metadaten mit FontForge aufrufen

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 und line-gap aufrufen möchten, öffnen Sie das Dialogfeld Font Info, wählen Sie das Menü OS/2 und dann den Tab Metrics aus. Wenn Sie UPM aufrufen möchten, öffnen Sie das Dialogfeld Font 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.

Diagramm, das die Ergebnisse der Verwendung von „size-Adjust: 50%“ und „size-Adjust: 200%“ zeigt.

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].
Breite von Roboto-Glyphen

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.
Zeichenhäufigkeit auf Englisch

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.