Bei Verwendung von @ font-face in CSS lädt der Browser den Text meiner Seite vor der Schriftart, was dazu führt, dass die Schriftart von einem Stil zum anderen springt (von Arial zu myfont). Bei Verwendung von kondensierten Schriften zum Beispiel ist das Problem visuell sehr ausgeprägt.Steuerung @ font-face Browser Download
Ich möchte nur die eine Schrift anzeigen, die ich mit @ font-face gewählt habe. Was ist der beste Weg, dies zu tun?
Dies ist ein ziemlich bekanntes Problem in einigen Browsern (Firefox 3.5/3.6, IE 7-9). WebINK verfügt über eine JavaScript-Datei, mit der Sie das Problem umgehen können.
Dieser wird als Flash Of Unstyled Text bekannt und ist darauf zurückzuführen, wie Sie bereits erwähnt, auf die Schriftdateien zusammen mit dem Rest der Seite geladen werden, dessen Text mit Standard oder Ausweich-Schriftart, bis die neuen gestylt wird Schriftart ist geladen und kann angewendet werden.
Es scheint, dass das Minimieren des Auftretens dieses Effekts am besten darin besteht, die Zeit zu verkürzen, die der Client beim Laden Ihrer benutzerdefinierten Schriftarten benötigt. Zwei Maßnahmen, die Sie ergreifen können, um dies zu erreichen, sind compressing your font files über gZip und die Angabe Ihrer Schriftart-Dateien für die langfristige Zwischenspeicherung durch einen Viewer-Browser für nachfolgende Ansichten über eine far-future expires header.
Wenn die FOUT noch recht ist für die Benutzer schrill, können Sie einen ähnlich geformten Schriftart angeben, die auf den meisten Zuschauern Maschinen als Ausweich installiert werden wahrscheinlich Ihre Seitengröße relativ konsistent wie die benutzerdefinierte Schriftart Lasten zu halten. Für Ihre komprimierte Schriftart verfügen die meisten Viewer beispielsweise bereits über Impact als verfügbare Schriftart oder "Arial Narrow", die beide einen "komprimierten" Stil aufweisen.
Und wenn alles andere fehlschlägt, können Sie immer den gesamten Text Ihres Dokuments mit color: rgba(0,0,0,0) stylen und JavaScript verwenden, um diese Regel am Ende eines Timers zu entfernen.
Es heißt FOUT der beste Weg, es in meiner Erfahrung ist durch die Verwendung von Google Font-Loader zu handhaben:
https://developers.google.com/webfonts/docs/webfont_loader
Wesentlichen, was Sie tun, ist lassen Sie die Seite zu laden normalerweise (bei dem der Körper versteckt ist oder gestylte Schriftblöcke sind ausgeblendet (Ihre Wahl), sobald sie geladen sind, wird eine Klasse zum Hauptteil der Seite hinzugefügt, dies löst die Anzeige der formatierten Schriftarten aus.
Das Skript fügt diese Klassen, so dass Sie entsprechend stylen können:
.wf-inactive - failed to load
.wf-loading - during load
.wf-active - loaded fine
Der einzige Nachteil ist, dass es benötigt Javascript ..
Das ist eine gute Frage :) – tybro0103
möglich Duplikat [Preload @ Font- Schriftarten zum Stoppen von Firefox Flicker/Delay] (http://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay) – Knu