2012-04-10 10 views
1

Was ist der beste Weg zu stoppen IE zeigt die Standardschriftart, während es das @ font-Face Webfont lädt? Die Seite wird mit Ajax geladen und die CSS-Datei wird in den Kopf geladen. Dieses Problem kann unter http://www.peterharveyco.com.au/ angezeigt werden und dann auf eines der Scroll-Projekte klicken. Nach dem, was ich gelesen habe, lade ich die Schriftart korrekt, um ein solches Problem zu vermeiden. Es lädt einfach alles, was ich als Backup-Schriftart eingestellt habe, bis es fertig ist. Ist die einzige Lösung, um eine nahe Backup-Schriftart zu setzen? Ich bin in Ordnung mit nichts da bis es bereit ist, wenn das möglich ist ...Flash der Standardschrift vor @fontface zeigt in IE

Jede Hilfe würde sehr geschätzt werden.

CSS-Datei:

@font-face { 
    font-family: 'TradeGothicLTStdBdCnNo.20'; 
    src: url('tradegothicltstd-bdcn20-webfont.eot'); 
    src: url('tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype'), 
     url('tradegothicltstd-bdcn20-webfont.woff') format('woff'), 
     url('tradegothicltstd-bdcn20-webfont.ttf') format('truetype'), 
     url('tradegothicltstd-bdcn20-webfont.svg#TradeGothicLTStdBdCnNo.20') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
+2

Ich glaube, dass dies passiert, wenn Sie mehrere Stylesheets mit font-family-Regeln haben. Es verwendet alle Lasten, bis das andere Stylesheet (das es überschreibt) den Download beendet. Ich bin mir aber nicht 100% sicher. – animuson

+0

Ich überprüfe das - ich habe mehrere Stylesheets, was wahrscheinlich sowieso nicht optimal ist ... obwohl ich das @fontface Stylesheet zuerst lade –

+0

Ich denke ich habe eine passende Lösung/Work-around für meine spezielle Situation gefunden. Die Schriftart wurde nicht auf der Homepage verwendet. Ich habe eine h1 als Überschrift der Seite hinzugefügt (sie hat es trotzdem benötigt) und den -3000px Rand verwendet, um es von der Seite zu verstecken. Das offensichtliche Problem dabei ist, wenn der Benutzer direkt auf die Projektseite geht ... Aber dann habe ich gerade festgestellt, dass die Bilder im Slider nicht im IE angezeigt werden, wenn Sie trotzdem direkt auf die Seite gehen (zB http: //www.peterharveyco.com.au/projects/austereo-perth - vielleicht das Thema einer anderen Frage, wenn ich das nicht herausarbeiten kann). –

Antwort

1

könnten Sie Google verwenden WebFont loader auf Ihre @ font-face-Schriften als benutzerdefinierte Schriftart angeben. Es sieht so aus, als könnten Sie die @ font-face-Regeln selbst in ein Stylesheet stecken und dann den Loader auf dieses Stylesheet zeigen. Sie können dann die Klasse .wf-loading verwenden, um die Elemente mit den benutzerdefinierten @ font-face-Schriftarten auf visibility:hidden festzulegen, sodass die Standardschrift nicht angezeigt wird. Dann verwenden Sie .wf-active Klasse, um visibility:visible zu setzen, um die Schriftarten @ font-face anzuzeigen

+0

I Ich habe das nicht bestätigt (mein Workaround reicht mir, um mit etwas anderem weiterzumachen), aber es klingt wie ein solider Plan. Vielen Dank. –