Hey hey `font-display`

Ihr kennt font-display doch sicher, oder? Es ist ziemlich großartig. Es ist eine CSS-Eigenschaft, die man innerhalb von @font-face-Blöcken verwenden kann, um zu steuern, wie, visuell, diese Schriftart geladen wird. Das Laden von Schriftarten ist wirklich ziemlich kompliziert. Hier ist ein Leitfaden von Zach Leatherman, der das beweist, mit über 10 Strategien zum Laden von Schriftarten, einschließlich Strategien, die kritisches Inline-CSS von Schriftart-Teilmengen beinhalten, kombiniert mit dem späteren Laden der restlichen Schriftarten über JavaScript. Es ist kein Spaziergang im Park.

Die Verwendung von font-display ist jedoch so etwas wie ein Spaziergang im Park. Es ist nur eine einzige Zeile CSS. Es löst nicht alles, was Zachs exotischere Demos tun, aber es kann mit dieser einen Zeile viel bewirken. Es ist erwähnenswert, das gerade jetzt anzusprechen, da die Unterstützung in letzter Zeit stark zugenommen hat. Sie ist jetzt in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+ und Chrome auf Android 64+ verfügbar. Ziemlich gut.

Was bekommt man davon? Die Möglichkeit, FOUT (kurzzeitig ungestylter Text) und FOIT (kurzzeitig unsichtbarer Text) so zu steuern, wie es für Ihr Projekt richtig ist, zwei Dinge, die beide in Bezug auf das Laden von Schriftarten ziemlich blöd sind. Wir haben hier ein paar Beiträge dazu.

• font-display für die Massen von Jeremy Wagner
• Wenn Sie FOUT wirklich nicht mögen, ist font-display: optional; vielleicht Ihr Ding von mir

Erinnerung

FOUT = Flash of Unstyled Text (Kurzzeitig ungestylter Text)
FOIT = Flash of Invisible Text (Kurzzeitig unsichtbarer Text)

Keines von beiden ist großartig. In einer perfekten Welt würden unsere benutzerdefinierten Schriftarten sofort angezeigt werden. Da dies jedoch keine praktische Möglichkeit ist, wählen wir basierend auf unseren Prioritäten.

Die beste Ressource dafür ist Monica Dinculescus Erklärungsseite

Ich würde diese Wertewahlen so zusammenfassen:

• Wenn Sie mit FOUT einverstanden sind, sind Sie wahrscheinlich am besten mit font-display: swap; bedient, das eine Fallback-Schriftart ziemlich schnell anzeigt, aber Ihre benutzerdefinierte Schriftart einfügt, wenn sie geladen ist.
• Wenn Sie mit FOIT einverstanden sind, sind Sie wahrscheinlich am besten mit font-display: block; bedient, was dem aktuellen Browserverhalten ziemlich ähnlich ist, bei dem nichts angezeigt wird, während auf die benutzerdefinierte Schriftart gewartet wird, aber schließlich ein Fallback erfolgt.
• Wenn die benutzerdefinierte Schriftart überhaupt nur angezeigt werden soll, wenn sie sofort verfügbar ist, dann ist font-display: optional; das Richtige für Sie. Sie wird weiterhin im Hintergrund geladen und ist wahrscheinlich beim nächsten Seitenaufruf verfügbar.

Das sind einige ziemlich gute Optionen für eine einzelne CSS-Zeile. Aber denken Sie daran, wenn Sie eine große, textlastige Website mit benutzerdefinierten Schriftarten betreiben, kann Zachs Leitfaden Ihnen helfen, mehr zu tun.

Ich würde fast soweit gehen und sagen: **Jeder @font-face-Block da draußen sollte eine font-display-Eigenschaft haben.** Mit der einzigen Einschränkung, dass Sie etwas Exotisches tun und aus irgendeinem Grund das Standardverhalten des Browsers wünschen.

Möchten Sie etwas recht Unglückliches hören? Wir haben bereits font-display: block; erwähnt. Würden Sie nicht denken, dass es, äh, nun ja, das Rendern von Text blockiert, bis die benutzerdefinierte Schriftart geladen ist? Das tut es nicht. Es gibt immer noch eine Austauschperiode. Es wäre perfekt für etwas wie Icon-Schriftarten, bei denen das Symbol (wahrscheinlich) keine Bedeutung hat, es sei denn, die benutzerdefinierte Schriftart wird geladen. Leider gibt es keine font-display-Lösung dafür.

Und, ach, wäre es nicht schön, wenn Google Fonts uns erlauben würde, es zu verwenden?