Erinnern Sie sich an FOUT? Bei der Verwendung einer benutzerdefinierten Schriftart über @font-face zeigten Browser bis zum Laden der benutzerdefinierten Schriftart eine Fallback-Schriftart im Schriftstapel an. Dies führte zu einem **„Flash of Unstyled Text“** – was beunruhigend war und Layout-Verschiebungen verursachen konnte. Wir haben Techniken dagegen entwickelt, zum Beispiel den Text unsichtbar machen, bis die Schriftart bereit ist.
Vor einigen Jahren begannen Browser, die Handhabung dessen zu ändern. Sie erkannten, wenn Text in einer benutzerdefinierten Schriftart gesetzt war, die noch nicht geladen war, und machten ihn unsichtbar, bis die Schriftart geladen war (oder X Sekunden vergangen waren). Das ist FOIT: **„Flash of Invisible Text“**. Wenn eine Schriftart fehlschlägt oder lange dauert, sind diese X Sekunden für Personen, die sich zu Recht um die Renderzeit-Performance sorgen, zu lang. Im schlimmsten Fall kann dieses Verhalten zu permanent unsichtbarem Inhalt führen.
Heutzutage versuchen wir, FOIT auf verschiedene Weise zu bekämpfen. In Faster Font Loading with Font Events schlägt Jonathan Suh die Verwendung einer Bibliothek vor, um zu erkennen, ob eine benutzerdefinierte Schriftart geladen wurde, und erst dann eine Klasse auf dem Dokument zu ändern, um den Text in dieser Schriftart zu setzen. Dies macht das Verhalten wie FOUT – beschleunigt lesbaren Inhalt auf Kosten einiger jarring visueller Veränderungen.
Zach Leatherman hat auch viel darüber geschrieben. In Better @font-face with Font Load Events schlägt er ebenfalls vor, auf das Laden der Schriftart zu warten, bevor eine Klasse gesetzt wird, um die Typografie festzulegen. Er geht auch darauf ein, was nötig ist, um einen Schriftart-Download auszulösen (es ist nicht so einfach wie eine @font-face-Deklaration). Scott Jehl bestätigt dies in Font Loading Revisited with Font Events, einschließlich eines Abschnitts über Cookies und Caching.
Zachs neuester Trick beinhaltete FOFT: **„Flash of Faux Text“**. Die Idee dabei ist, nur auf die römische Variante der benutzerdefinierten Schriftart zu warten und den Text sofort damit zu setzen. Sie zwingen den Browser, „faux bold“ und „faux italic“ zu erstellen, wo nötig, die durch die echten Versionen ersetzt werden, sobald diese heruntergeladen sind.
Vitaly Friedman schrieb über ihren Ansatz auf Smashing Magazine, wo sie tatsächlich localStorage verwenden, um die Schriftart zu cachen. Dies führt beim ersten Seitenaufruf zu einem FOUT und bei nachfolgenden Aufrufen zu einem (schnellen) FOIT.
Ich finde es einfach interessant, wie wir uns bei diesen Dingen hin und her bewegen. Der Browser verhält sich auf die eine Weise und wir überlisten ihn, sich auf eine andere Weise zu verhalten. Er ändert sich zu dieser Weise, und wir überlisten ihn, sich auf die alte Weise zu verhalten.
Das ist ziemlich cool.
Ich frage mich, wie das Ergebnis wäre, wenn wir diese Methode mit dem alten media=’none‘-Attribut-Trick mischen würden, um Ressourcen asynchron herunterzuladen. Würde es sich lohnen?
Falls Sie dieses Thema verpasst haben – hier ist der Link CSS ohne Rendering-Blockierung laden
Danke für die Erwähnungen!
Ja, ein globaler Timeout für FOUT funktioniert einfach nicht – während er für Inhalts-Schriftarten gedacht war und dort gut genug funktionieren mag, funktioniert er nicht für Icon-Schriftarten (deren ungestylte Fallback-Zeichen nicht mit dem Symbol der Web-Schriftart zusammenhängen).
Glücklicherweise kommt die Schriftart-Rendering-API. Sie wird eine ordnungsgemäße Konfiguration hierfür mit nur CSS ermöglichen: https://github.com/KenjiBaheux/css-font-rendering
Ironisch, dass ich damals gegen FOUT gekämpft habe, aber jetzt, wo ich gegen FOIT kämpfe, ist FOUT gar nicht so schlecht. Es ist verrückt, wie das Mobile die Landschaft des Webs verändert hat.
Der localStorage-Ansatz ist interessant – es müssen definitiv einige Experimente durchgeführt werden, als weitere Lösung, um das ideale Szenario voranzutreiben.
Danke für die Erwähnung und die Bereitstellung der anderen Ressourcen!
Ich finde, der Inhalt des Kunden ist wichtiger als die Typografie :)
Erinnern Sie sich an sIFR, das für FOUT berühmt war? Leute haben es einfach hingenommen im Austausch für benutzerdefinierte Schriftarten… wir haben unsere Kunden darauf trainiert, dass es normales Verhalten war im Austausch für eine coole Schriftart.
Vielleicht sollten wir jetzt, bis eine solide Lösung auf dem Tisch liegt, unsere Kunden darauf trainieren, dass FOUT ein Kompromiss ist, um sicherzustellen, dass ihre Nutzer schnell und auf vorhersehbarere Weise mit ihren Inhalten versorgt werden, was besser ist als ein TSFONC – Three Second Flash of No Content.
Ich glaube, ich kümmere mich mehr um das FOUT als der Kunde. Ich wette, wenn ich das FOUT-Muster öfter sehen würde, würde es mir weniger ausmachen.
Sie kümmern sich vielleicht mehr als Ihr Kunde. Aber was ist mit den zukünftigen Nutzern? ;)
Eine „einzigartige“ oder „schöner aussehende Schriftart“ kann eine größere Rolle spielen, als manche Leute denken, bei der Nutzerbindung. Zum Beispiel würde ich mich wahrscheinlich nicht lange auf einer modernen Nachrichtenmedienseite aufhalten, die eine Schriftart hat, die unangenehm zu lesen ist. Obwohl die meisten Seiten eine sinnvolle Standardeinstellung wählen, ist das also nicht das Problem.
Betrachten wir also die Kehrseite der Medaille
Ist es wahrscheinlicher, dass ich auf einer Website bleibe, die sich sehr speziell um ihre Typografie gekümmert hat und sogar verschiedene Zeilenhöhen und Schriftarten A/B-getestet hat?
Die Antwort ist wahrscheinlich „Ja“. Wenn sie ein besseres Leseerlebnis bieten, werde ich sie eher wählen als andere (auch wenn ich die anderen nicht speziell vermeide)
Ich denke einfach, alle Nutzer sollten alle Schriften der Welt installieren. Dann ist jede Schriftart eine Systemschriftart. Tschüss
@font-face, FOUT, FOIT, FOFT. Und tschüss auch allen Webfont-Diensten :p, oh je!Für einen Moment dachte ich, FOFT bedeutet „Flash of F@#$!-up Text“ >_<. Ernsthaft.
Ricardo Zea: In diesem Sinne sollten Sie sich http://fontfamily.io/ ansehen.
@Zach, Alter, das ist großartig!
Ich habe diese alte Liste eine Weile benutzt http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html, aber http://fontfamily.io/ ist wie CanIUse.com für Systemschriften :)
Vielen Dank fürs Teilen!