2012-08-05 5 views
5

Ich lade mit @ font-face zwei externe Schriftarten auf meine Webseite. Sie laden sich perfekt in Chrome, aber wenn ich in IE versuche, zeigt der Browser eine Standardschrift an, während die Seite geladen wird, dann ändern sich die Schriftarten entsprechend meiner CSS @ font-face.So entfernen Sie die Standardschriftart im Browser beim Laden von @ font-face in CSS? "FOUT"

Wie kann ich die Standardschrift aus der Anzeige in IE und anderen Browsern entfernen, während die Seite geladen wird? Ich möchte das so genannte FOUT (Flash of unstyled text) entfernen. Gibt es eine Möglichkeit, dies über das Stylesheet zu tun?

Danke für jede Hilfe!

+0

user1577346, da meine Antwort für Sie funktioniert, bitte ** akzeptieren ** diese Antwort, die ein grünes Häkchen darauf setzen wird. Vielen Dank. – arttronics

Antwort

0

Sie könnten einen CSS-Übergang verwenden, um Ihren Text nach N Millisekunden oder was Sie für ausreichend halten, um die Schriftarten zu laden. css3 transition animation on load?

+0

Keine gute Antwort. Der von Ihnen angebotene Link zeigt, wie der Text während des Mouse-Hover-Ereignisses ausgeblendet wird. – arttronics

+0

Ich habe den Link für Sie geändert –

+1

Einen Link zu einer anderen SO-Frage zu veröffentlichen, ohne einen relevanten Code zur Verfügung zu stellen, der diese Frage tatsächlich beantwortet, ist ein No-Go und wird normalerweise als Kommentar gemacht. – arttronics

3

Für die Standard-Browser-Schriftart, die Sie nicht wollen, setzen Sie die font-size CSS-Eigenschaft auf 0px und Sie die font-size in Ihren @font-face Klassennamen CSS Regeln erklärt haben, zu gewährleisten.

Wenn Sie dies auch mithilfe eines dedizierten Skripts lösen möchten (Firefox 3.5/3.6 oder Internet Explorer 7-9), lesen Sie die JavaScript-Lösung FOUT-B-Gone.

+0

das würde funktionieren, aber ich würde ein Fallback mit einem Feature-Detektor wie modernisiz nur für den Fall, dass Schrift-Gesicht nicht verfügbar ist, und Sie können der Schriftgröße einen positiven Wert geben –

+0

Sie können immer die Schriftgröße während der Schriftart wiederherstellen Fallback-Regeln der Webseite, aber das ist eine andere Anforderung, die das OP möglicherweise nicht benötigt. – arttronics

+0

Sind Sie sicher, dass 'font-size' in' @ font-face' erlaubt ist? Es ist nicht in http://www.w3.org/TR/css3-fonts/#font-prop-desc – atlavis