Zeigen Sie Ersatztext sofort an, wenn Leser die Wörter benötigen, um eine Seite zu nutzen. Wählen Sie vorübergehendes Ausblenden nur für ein kleines, begründet schriftabhängiges Element. Für eine Seite, die Sie auf einem Mac pflegen, erklärt dieser Leitfaden, wie Sie eine Richtlinie auswählen und ihre Auswirkungen auf den Textfluss testen.

Was ändert sich tatsächlich, während eine Schrift geladen wird?

Eine Ersatzschrift rendert denselben Text in einer anderen Schriftart, solange die angeforderte Schrift nicht verfügbar ist. Vorübergehend ausgeblendeter Text entspricht der Blockierungsphase des Schriftladens: Der Browser setzt ein unsichtbares Ersatzschriftbild. Die Ladezeitachse beginnt, wenn der Browser erstmals versucht, die herunterladbare Schriftart zu verwenden. MDNs Referenz zu font-display erläutert diese Phasen.

Dieser Unterschied ist wichtig, wenn Sie eine Seite überprüfen. Eine leere Überschrift belegt nicht, dass ihre endgültigen Abmessungen reserviert wurden. Während der Blockierungsphase verwendet der Browser weiterhin das Layout der Ersatzschrift; das Ausblenden der Buchstaben legt nicht die späteren Zeilenumbrüche der heruntergeladenen Schrift fest. Beurteilen Sie Sichtbarkeit und Layoutstabilität getrennt.

Die maßgebliche Einstellung ist der Deskriptor font-display innerhalb einer @font-face-Regel. Er gehört zur Schriftartdefinition und nicht zu einem gewöhnlichen Absatzselektor. Dies ist eine Entscheidung bei der Seitenerstellung: Verwenden Sie das Stylesheet oder die Schriftarteinstellungen, die für die von Ihnen gepflegte Seite verfügbar sind. MDN dokumentiert, wo font-display gilt.

Welcher font-display-Wert passt zur Aufgabe des Lesers?

Entscheiden Sie vor der Bearbeitung zwei Dinge: Sollen die Wörter sofort in einer anderen Schrift erscheinen, und ist es akzeptabel, diese Schrift später zu ersetzen? Die folgende Tabelle überträgt die dokumentierten Ladephasen auf Auswahlmöglichkeiten für eine abstrakte öffentliche Seite. MDNs Definitionen der Werte beschreiben das zugrunde liegende Verhalten.

Wert Solange die Schriftart nicht verfügbar ist Möglichkeit, die Ersatzschrift zu ersetzen Geeigneter Ausgangspunkt
swap Äußerst kurze Blockierung, danach sichtbare Ersatzschrift Unbegrenzter Austauschzeitraum Eine kurze Überschrift, bei der die vorgesehene Schriftart wichtig ist
fallback Äußerst kurze Blockierung, danach sichtbare Ersatzschrift Kurzer Austauschzeitraum Lesetext, bei dem eine frühe Änderung akzeptabel ist
optional Äußerst kurze Blockierung Kein Austauschzeitraum Text, bei dem es am wichtigsten ist, die zuerst sichtbare Schrift beizubehalten
block Unsichtbare Ersatzschrift während einer kurzen Blockierungsphase, danach sichtbare Ersatzschrift Unbegrenzter Austauschzeitraum Ein kleines Element mit einer bestimmten Schriftartabhängigkeit
auto Vom Browser ausgewählte Richtlinie Vom Browser ausgewählte Richtlinie Das Standardverhalten des Browsers akzeptieren

Dies sind Richtlinienkategorien und keine exakt konfigurierbaren Zeitangaben. Der aktuelle CSS-Fonts-Level-4-Arbeitsentwurf des W3C empfiehlt typische Zeitspannen, lässt aber ausdrücklich Abweichungen zwischen Browsern zu. Außerdem beschränkt er block auf kleine Textstellen, bei denen eine bestimmte Schrift für die Nutzbarkeit erforderlich ist. Der Wunsch nach einer schöneren Überschrift allein ist ein schwacher Grund, sie leer zu lassen. W3C: Schriftanzeige pro Schriftart steuern.

Für eine beispielhafte Seite mit einer Überschrift namens „Beispielsammlung“, einer Navigation namens „Abschnitt Eins“ und mehreren Absätzen sollten Sie für Lesetext zunächst fallback in Betracht ziehen. Ziehen Sie für die kurze Überschrift swap in Betracht, wenn die spätere Verwendung ihrer Schriftart wichtig ist. Wählen Sie optional, wenn es Vorrang hat, die erste sichtbare Darstellung beizubehalten. Diese Empfehlungen wenden die dokumentierten Richtlinien auf die Aufgabe des Lesers an; es handelt sich nicht um Messergebnisse.

Eine Entscheidungshilfe zu Sichtbarkeit und Umbruch verwenden

Bewerten Sie jede Textfunktion einzeln. Ein Navigationslabel und ein Absatz können dieselbe Schriftfamilie verwenden, haben jedoch unterschiedliche Layoutbedingungen. Die entscheidende Frage ist, ob ein Schriftwechsel jemanden daran hindert, die Aufgabe fortzusetzen, oder lediglich das Erscheinungsbild verändert.

  1. Lesen Sie die Seite mit ihrer Ersatzschrift. Kann jemand „Abschnitt Eins“ verstehen, die Überschrift erkennen und die Absätze lesen? Wenn ja, ist eine sichtbare Ersatzschrift ein sinnvoller Ausgangspunkt.
  2. Beobachten Sie den Schriftwechsel. Entsteht bei der Überschrift eine zusätzliche Zeile? Werden Labels umgebrochen? Verschiebt sich der nächste Absatz?
  3. Wählen Sie den akzeptablen Austauschzeitraum. Verwenden Sie swap, wenn ein späterer Austausch noch akzeptabel ist, fallback, wenn nur ein früher Austausch willkommen ist, oder optional, wenn die zuerst sichtbare Schrift beibehalten werden soll.
  4. Verlangen Sie einen konkreten Grund für leeren Text. Bevor Sie block wählen, ermitteln Sie, was mit der Ersatzschrift unbrauchbar würde und warum sich diese Abhängigkeit nicht beseitigen lässt.

Angenommen, „Beispielsammlung“ belegt in der Ersatzschrift eine Zeile und in der heruntergeladenen Schrift zwei. Wenn die Überschrift eine hypothetische Zeilenhöhe von 40 Pixeln hat, trägt die zusätzliche Zeile bei unverändertem Abstand 40 Pixel zu ihrer Höhe bei. Darunterliegende Inhalte können sich entsprechend verschieben. Dies sind veranschaulichende Annahmen und keine Browsermessungen.

Vorübergehendes Ausblenden löst diese Abweichung nicht. Die praktischen Möglichkeiten sind, die Ersatzschrift besser anzupassen, das Layout nach dem Testen anzupassen oder eine Richtlinie auszuwählen, die einen späten Austausch vermeidet. Beim aktuellen Verhalten von optional im W3C-Entwurf darf die optionale Schriftart die Ersatzschrift, sobald diese gerendert wurde, während der Lebensdauer der Seite nicht ersetzen. Die Definition von optional beim W3C.

Die Auswahl auf einem Mac anwenden und testen

Verwenden Sie eine Seite, deren Stylesheet Sie bearbeiten können und deren vorhandene Webschrift bereits erfolgreich geladen wird. Behalten Sie den tatsächlichen Verweis auf die Schriftdatei bei; für diesen Vergleich ist weder ein neuer Schriftdownload noch ein Ersatzasset erforderlich.

Suchen Sie die relevante @font-face-Deklaration im Stylesheet der Seite oder in der unterstützten Schriftkonfiguration. Setzen Sie den Deskriptor font-display auf den Kandidatenwert, etwa font-display: fallback;. Prüfen Sie die weiteren Deklarationen für Schriftschnitte und Stile, damit der Test die Schriftarten umfasst, die die Seite tatsächlich anfordert. Die Position des Deskriptors ist im Beispiel zu font-display bei MDN dargestellt.

Drücken Sie in Chrome auf Ihrem Mac Command + Option + I, um die DevTools zu öffnen. Alternativ können Sie mit der rechten Maustaste auf den betreffenden Text klicken und Untersuchen wählen; im Bereich Elements wird das angewendete CSS unter Styles angezeigt. Chromes Anleitung zum Öffnen der DevTools beschreibt beide Wege.

Führen Sie nach jeder Änderung am Stylesheet den folgenden Vergleich durch. Lassen Sie Fensterbreite und Zoom gleich, damit Sie Unterschiede der Richtlinie zum Schriftladen zuordnen können.

  1. Öffnen Sie Network, aktivieren Sie Disable cache, wählen Sie im Menü Throttling eine langsamere Voreinstellung und laden Sie die Seite neu. Verwenden Sie den Filter Font, um die Schriftanforderungen in den Blick zu nehmen.
  2. Beobachten Sie die Überschrift, die Navigation und den Absatzanfang. Notieren Sie, ob der Text zunächst leer bleibt, in der Ersatzschrift erscheint und später seine Zeilenumbrüche ändert.
  3. Wenn der Übergang zu schnell abläuft, um ihn zu untersuchen, aktivieren Sie in den Einstellungen des Bereichs Network die Option Capture screenshots und laden Sie die Seite neu, um den Ladeablauf zu prüfen.
  4. Deaktivieren Sie die Drosselung und Disable cache. Laden Sie die Seite erneut, um einen wiederholten Besuch unter normalen Bedingungen zu vergleichen. Chromes Referenz zu den Netzwerkfunktionen beschreibt diese Steuerelemente.

Testen Sie das Verhalten bei nicht verfügbarer Schriftart separat. Klicken Sie in Network mit der rechten Maustaste auf die tatsächliche Schriftanforderung und wählen Sie Block request; laden Sie dann die Seite neu. Chrome führt das passende Muster unter Request conditions auf. Prüfen Sie, ob die Wörter lesbar werden und die Seite mit der Ersatzschrift weiterhin nutzbar ist. Entfernen oder deaktivieren Sie das Testmuster anschließend. Chromes Dokumentation zu Request conditions erläutert das Blockieren von Anforderungen und wie Sie blockierte Anforderungen erkennen.

Wiederholen Sie die Seitenprüfung in Safari, falls dies zu Ihrer vorgesehenen Mac-Browserumgebung gehört. Betrachten Sie den Chrome-Test als Beleg für die Darstellung in diesem Browser und nicht als Nachweis identischer Zeitabläufe in anderen Browsern: Die Spezifikation erlaubt Unterschiede zwischen Browsern. Halten Sie eine kurze Vergleichsnotiz mit Browser, Kandidatenwert, anfänglicher Sichtbarkeit und beobachtetem Zeilenumbruch fest.

Was, wenn die sichtbare Ersatzschrift das Layout zu stark verändert?

Beginnen Sie mit dem tatsächlichen Text und der verfügbaren Breite. Vergleichen Sie kurze Labels, die längste Überschrift und mehrere Absatzzeilen. Eine Ersatzschrift, die der Webschrift optisch ähnelt, kann dennoch andere Zeichenbreiten haben und zu anderen Umbrüchen führen.

Für eine bessere Anpassung skaliert size-adjust die Glyphenumrisse und Metriken einer Schriftart, einschließlich der Zeichenbreiten. MDN zeigt, wie eine lokale Ersatzschrift definiert und so angepasst wird, dass sie besser zu einer primären Webschrift passt. Ermitteln Sie für Ihr tatsächliches Schriftenpaar einen geeigneten Prozentwert; der Prozentwert aus einem Dokumentationsbeispiel ist keine allgemeingültige Einstellung. MDN: size-adjust.

Vertikale Metriken sollten Sie gesondert prüfen. Der Deskriptor ascent-override steuert die Metrik oberhalb der Grundlinie, die beim Layout von Zeilenboxen verwendet wird. MDN kennzeichnet die Unterstützung derzeit jedoch als eingeschränkt. Betrachten Sie diese Anpassung als Verbesserung und behalten Sie ein lesbares Ersatzlayout für Browser bei, die sie nicht unterstützen. MDN: ascent-override.

Überlassen Sie die Textgestaltung dem Browser. Versuchen Sie nicht, eine Überschrift zu stabilisieren, indem Sie jedes Zeichen einzeln ersetzen oder vermessen. Der Abgleich von CSS-Schriften berücksichtigt Graphemcluster besonders, etwa ein Grundzeichen mit einem kombinierenden diakritischen Zeichen. Prüfen Sie vollständige Labels und Zeilen in ihrem tatsächlichen Layout. W3C: Abgleich von Clustern.

Ändern ein Preload oder eine Schriftladebibliothek die Entscheidung?

Preload betrifft das Auffinden von Ressourcen. Der WHATWG-HTML-Standard definiert preload als vorzeitiges Abrufen und Zwischenspeichern einer Ressource, die voraussichtlich für die aktuelle Navigation benötigt wird. Es legt Ihre font-display-Richtlinie nicht fest. Ziehen Sie es erst in Betracht, nachdem Sie das akzeptable sichtbare Verhalten ausgewählt haben; ein früheres Abrufen ersetzt nicht die Entscheidung darüber, was geschieht, wenn die Schriftart weiterhin nicht verfügbar ist. WHATWG: Linktyp preload.

Beginnen Sie bei gewöhnlichem Seitentext mit CSS. Wenn ein vorhandenes Projekt Font Face Observer verwendet, gibt dessen dokumentierte Methode load() ein Promise zurück, das bei erfolgreichem Laden der Schriftart erfüllt und bei einem Fehler abgelehnt wird. Der Familienname sowie die optionalen Angaben zu Schriftschnitt, Stil und Laufweite sollten zur angeforderten Schriftart passen. Die Bibliothek dokumentiert außerdem, wie sich geeigneter Testtext angeben lässt, wenn die Standardschriftzeichen in der Schriftart fehlen. Dokumentation zu Font Face Observer.

Ein erfolgreicher Bibliotheks-Callback signalisiert den Ladevorgang; Ihre Anwendung bestimmt weiterhin, was sichtbar wird. Wenn eine eigene Logik Text ausblendet, legen Sie einen Fehlerpfad fest, der eine lesbare Ersatzschrift wiederherstellt. Andernfalls kann eine fehlgeschlagene Ladung die Ausblendregel der Anwendung bestehen lassen. Dies ist eine Implementierungsempfehlung, die sich aus den dokumentierten Erfolgs- und Fehlerpfaden der Bibliothek ableitet.

Die native API hat eine ähnliche Grenze. document.fonts.ready wird erfüllt, nachdem das Laden und die Layoutvorgänge für verwendete Schriftarten abgeschlossen sind; diese Menge kann von allen deklarierten Schriftarten abweichen, darunter optionale Schriftarten, deren Gelegenheit verstrichen ist. Sie beweist daher nicht, dass jede vorgesehene Schriftart sichtbar ist. MDN: Document-Eigenschaft fonts.

Ebenso wählt das optionale Textargument von document.fonts.load() passende Schriftarten anhand ihrer Unicode-Bereiche aus; es prüft nicht die Abdeckung einzelner Glyphen. Der Abschluss des Ladens und die korrekte Darstellung des vollständigen Beispiels bleiben getrennte Prüfungen. MDN: FontFaceSet-Methode load().

Wählen Sie die Richtlinie, indem Sie langsame, nicht verfügbare und wiederholte Ladevorgänge derselben Seite prüfen. Sorgen Sie dafür, dass gewöhnliche Wörter lesbar bleiben, entscheiden Sie ausdrücklich, ob ein späterer Austausch akzeptabel ist, und erlauben Sie vorübergehendes Ausblenden nur dort, wo für ein kleines Element eine nachgewiesene Schriftartabhängigkeit besteht. So kann jemand unter allen getesteten Bedingungen „Beispielsammlung“ problemlos weiterlesen.

Quellen