Sind @ font-face eingebettete Schriften immer die letzten Dinge, die heruntergeladen werden können?
Ich benutze @ font-face zum ersten Mal und es scheint, als ob die Font-Datei immer die letzte Ressource ist, die auf der Seite geladen wird, egal was passiert. Ich benutze ein von Font Squirrel generiertes Kit mit der Smiley-Syntax. Ich habe einige der vorgeschlagenen Techniken hier ausprobiert, um die Schriftart zu bekommen Sie können die Schriftart direkt als Daten in das CSS einfügen und ein formatiertes Element in den Kopfbereich des Dokuments einfügen. Keine dieser Techniken funktioniert; In Chrome, FF und IE wird die Schriftartendatei immer zuletzt heruntergeladen.
Gibt es irgendwelche Auswirkungen auf die Reihenfolge, in der die Schriftart geladen wird?
Es gibt eine verwandte Frage hier , aber es verlinkt nur auf den gleichen Paul Irish Post Ich habe es erwähnt.
2 Antworten
Das Laden von Schriften unterscheidet sich von Browser zu Browser (ich denke, Sie beziehen sich auf FOUC).
Ich denke, der einzige Browser, der es so schnell lädt, wie es die @ font-face-Regel liest, ist IE und Opera.
EDIT mit Beispielen:
Hier sind einige Nettoladungslisten für eine einfache Site:
-
font-familywird zuletzt in .css Datei aufgerufen - nach allem Hintergrund Bilder - Die geladene Schriftart ist
scriptbl-webfont -
@font-faceist nach den Reset-Stilen oben auf css definiert.
FF5 - Schrift wird zuletzt geladen:
IE9 - Schriftart lädt auf @ font-face - und vor Hintergrundbildern:
Opera 11 - Schrift lädt @ font-face - und vor Hintergrundbildern:
Safari 5 - Die Schrift wird zuletzt geladen (es gibt kein Favicon in meinem Ordner - Safari fügt das selbst hinzu):
Ich bin mir nicht sicher, was dein Erlebnis ist ein Problem. Für mich ist die Verwendung einer anderen Schriftart, die heruntergeladen werden muss, eines der letzten Dinge, die passieren. Die unterschiedliche Schriftart ist ein Präsentationsstück, es ist extra nicht in meinem Kopf erforderlich, lasst alle benötigten Sachen runterladen und dann die Extras.
Tags und Links performance css3 font-face