Eine font-display-Einstellung für langsame Verbindungen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich persönlich mag FOUT (Flash of Unstyled Text) überhaupt nicht. Ich finde es gut, dass es eine Option gibt, denn Texte im Web, die nicht schnell angezeigt werden, sind schlecht. Ich weiß, dass font-display: swap; beliebt ist, weil es gut für die Performance ist, aber dieser FOUT-Kram schmerzt mich. Matt Hobbs

Wenn es eine Sache gibt, die ich von diesem Beitrag mitnehmen möchte, dann ist es, dass font-display: swap eine sehr gute Option für Benutzer mit einer schnellen Internetverbindung ist. Aber seine unendliche Austauschperiode könnte für Benutzer mit sehr langsamen und instabilen Verbindungen frustrierend sein. Wenn Sie Benutzer haben, die Ihre Website unter diesen Bedingungen besuchen (und ich bin ziemlich sicher, dass dies irgendwann der Fall sein wird), dann könnte es sich lohnen, font-display: fallback oder sogar font-display: optional in Betracht zu ziehen.

Sehen Sie, ich habe es Ihnen gesagt. Ich mag, wie font-display: optional; FOUT komplett stoppt. Die Schriftart wird entweder extrem schnell angewendet oder gar nicht verwendet (wird aber trotzdem asynchron heruntergeladen). Wahrscheinlich ist die Schriftart beim nächsten Seitenaufruf geladen und zwischengespeichert und wird verwendet.

Beachten Sie, dass es hier um langsame Verbindungen geht, nicht unbedingt um Verbindungen, bei denen der Benutzer so wenig Daten wie möglich verbrauchen möchte. Wenn dies der Fall ist, schauen Sie sich einige der neueren Beiträge an, die wir in Responsible, Conditional Loading verlinkt haben.


Und Junge, Junge, der Web Performance Calendar war dieses Jahr einfach voll mit großartigen Artikeln.

Direkter Link →