Wenn Sie FOUT wirklich nicht mögen, könnte `font-display: optional` genau das Richtige für Sie sein

Die Geschichte von FOUT ist so faszinierend. Früher taten Browser das: Sie zeigten eine „Fallback“-Schriftart an, während eine benutzerdefinierte Schriftart geladen wurde, und zeigten dann den Text an, sobald diese geladen war. Die Branche mochte das irgendwie nicht, weil es ruckelig wirkte und zu Neuanordnungen führen konnte. Also änderten die Browser und begannen, Text zu verstecken, bis die benutzerdefinierte Schriftart geladen war. Die Branche hasste das noch mehr. Nichts ist schlimmer als eine Seite ohne Text!

Das Laden von Schriftarten wurde furchtbar kompliziert. Schauen Sie sich dieses Video von Zach Leatherman und mir an, in dem wir darüber sprechen.

Jetzt sagen die Browser: Warum geben wir Ihnen nicht die Kontrolle in Form von APIs und CSS zurück? Sie können das Verhalten mit der Eigenschaft font-display (Spezifikation) steuern.

Es scheint, als ob font-display: swap; die meiste Aufmerksamkeit bekommt. Das aus gutem Grund. Das ist der Wert, der FOUT am stärksten zurückbringt. Der Browser wartet *überhaupt nicht* auf eine nicht geladene Schriftart. Er zeigt Text sofort in der am besten passenden und verfügbaren Schriftart des Stapels an und tauscht dann, wenn eine höher passende Schriftart geladen wird, dagegen aus.

@font-face {
  font-family: Merriweather;
  src: url(/path/to/fonts/Merriweather.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Merriweather,   /* Use this if it's immediately available, or swap to it if it gets downloaded within a few seconds */
               Georgia,        /* Use this if Merriweather isn't downloaded yet. */
               serif;          /* Bottom of the stack. System doesn't have Georgia. */
               
}

Die Leute wollten ihr FOUT zurück, sie haben es bekommen. Nun ja, sobald font-display in ihrem Browser unterstützt wird. Im Moment betrachten wir Chrome 60+ als den einzigen Browser, der es ausliefert (was bedeutet, dass es für den Rest der Blink-Familie nicht mehr lange dauern wird). Es ist bereits hinter einem Flag in Firefox, also ist das ein gutes Zeichen.

Aber was, wenn Sie FOUT nicht besonders mögen?

Eine Option dafür ist font-display: fallback;. Es ist etwas seltsam benannt, da es dem Standardverhalten (auto oder block) sehr ähnlich ist. Der Unterschied ist, dass es eine sehr kurze Wartezeit („Schriftart-Blockierungszeitraum“) von etwa 100 ms hat, in der nichts angezeigt wird, wenn die Schriftart nicht bereit ist. In dieser extrem kurzen Zeit wird stattdessen eine Fallback-Schriftart angezeigt. Dann hat die Schriftart etwa 3 Sekunden Zeit, geladen zu werden und eingeblendet zu werden, sonst wird sie es nie.

Das erscheint ziemlich vernünftig. Was Sie dort verhindern, ist ein späte Austausch, was am unbeholfensten ist. Aber immer noch das Risiko von FOUT.

Wenn Sie es vorziehen, dass die Web-Schriftart, falls sie nicht sofort verfügbar ist, nur die Fallback-Schriftart anzeigt und *niemals* darauf umschaltet, auch nachdem sie heruntergeladen wurde. Das können Sie tun! Das ist es, was font-display: optional; tut. Es gibt immer noch die etwa 100 ms lange Schriftart-Blockierungszeit (was der Schriftart eine Chance gibt, beim ersten Seitenaufruf angezeigt zu werden), aber danach wird die Fallback-Schriftart angezeigt und es wird nicht umgeschaltet. Wahrscheinlich wurde die Schriftart letztendlich heruntergeladen, und beim nächsten Seitenaufruf wird sie im Cache gespeichert und verwendet.

Ich bin hier ziemlich aufgeschlossen. Ich verstehe, wie font-display: swap; ideal für die beste Barrierefreiheit von Inhalten ist. Ich bin kein großer Fan von FOUT, daher kann ich den Reiz von font-display: optional; verstehen. Ich sehe auch, wie font-display: fallback; eine Art Mittelweg darstellt.

Neben der Browserunterstützung, die für die Nutzung unerlässlich ist, gibt es auch die Frage der Unterstützung durch Webfont-Anbieter. Wenn Sie beispielsweise die Standard-Schriftart-Lademethoden von Google Fonts verwenden, haben Sie keine Möglichkeit, font-display zu verwenden, da die `@font-face`-Blöcke aus den von Google gehosteten Stylesheets stammen. Es gibt eine offene Diskussion darüber. Es gibt jedoch Möglichkeiten, Google Fonts mit Ihren eigenen `@font-face`-Blöcken zu verwenden. Konsultieren Sie auf jeden Fall Zach Leatherman's Anleitung.