Wir machen eine kleine Pause bei der Arbeit an der Suche, um ein kleines, nerviges Problem zu lösen.
„FOUT“ steht für „Flash of Unstyled Text“ (Blitz ungestylten Textes). Dies ist ein Phänomen, bei dem @font-face-Schriften eine Weile zum Laden benötigen und man daher die Fallbackschrift vor der benutzerdefinierten Schrift sieht. Dies ist normalerweise kein Problem bei Typekit. Auch ist es heutzutage in modernen Browsern (außer IE 9) wirklich kein Problem. Es ist jedoch ein Problem für uns, da wir uns speziell dafür entschieden haben, das Typekit-JavaScript asynchron zu laden.
Die Hoffnung ist jedoch nicht verloren, Typekit hat dieses Problem abgedeckt, wir müssen nur ein kleines bisschen Arbeit auf unserer Website leisten. Wir fügen dem <html>-Element eine neue Klassenbezeichnung namens „wf-loading“ (Web Font Loading) hinzu. Dann deklarieren wir in unserem CSS, dass jeder Selektor, der eine benutzerdefinierte Schrift verwendet, sichtbar versteckt ist, bis diese Klassenbezeichnung verschwindet. Vielleicht etwas riskant, aber wenn die Schrift nicht geladen werden kann, gibt es ein Zeitlimit, das die Klasse trotzdem entfernt. Dies dient nur zur Bekämpfung von FOUT, nur ein kleiner visueller Gefälligkeitsdienst.
Wir machen das alles, indem wir einen kleinen Sass @mixin namens „preventFOUT“ erstellen und ihn in unseren benutzerdefinierten Schriftstapeln, die ebenfalls @mixins sind, @include-en.
Das funktioniert jetzt gut für uns. Letztendlich wechseln wir in diesem Design zu HF&J-Schriften, die direkt über @font-face geladen werden, sodass wir uns im Grunde nicht mehr darum kümmern müssen.
Hallo Chris! Der Link zu paulirish.com funktioniert nicht, weil am Ende ein einzelnes Anführungszeichen steht.
Danke! Behoben.
Ich dachte total, du würdest
wf-loading & { visibility: hidden; }zu all deinen font-family-Mixins hinzufügen, die eine Webfont haben. So würde überall, wo du eine Webfont verwendest, automatisch der Kampf gegen FOUT stattfinden.Auf dem Blog von Typekit wird auch empfohlen, die Klasse .wf-inactive zu verwenden, um einen Fallback-Schriftstapel einzurichten, falls Typekit fehlschlägt.