Ist es möglich, @ font-face Schriftarten vor dem Laden der Seite zu laden oder sonstwie zu cachen, am ehesten mit Javascript, damit Sie den hässlichen Sprung nicht bekommen, wenn die Seite endlich geladen wird?Preloading @ font-face Schriftarten?
Ich kenne keine aktuelle Technik, um das Flackern zu vermeiden, wenn die Schriftart geladen wird, aber Sie können es minimieren, indem Sie richtige Cache-Header für Ihre Schriftart senden und sicherstellen, dass diese Anforderung so schnell wie möglich ausgeführt wird.
This sollte Ihr Problem lösen.
Um Ihre erste Frage zu beantworten: ja können Sie. Nur Gecko und WebKit Browser unterstützen es derzeit jedoch.
Sie müssen nur Link-Tags im Kopf hinzuzufügen:
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
Dies funktioniert nicht mit Canvas Fonts – d13
Sie sollten vorsichtig sein mit Prerendering Sachen auf Ihrer Seite. Es ist nicht dasselbe wie Prefetching. – kleinfreund
Warum 'prerender' und nicht' preload'? es ist eine Schriftart, keine HTML-Datei, es gibt nichts zu rendern – vsync
ein paar Techniken für „Vorbelastung“ hier gibt es: http://paulirish.com/2009/fighting-the-font-face-fout/
Vorwiegend den Browser in trickst die Datei so schnell wie möglich herunterzuladen.
Sie können es auch als Daten-URI liefern, was sehr hilft. und Sie können auch den Seiteninhalt ausblenden und zeigen, wenn es fertig ist.
Entschuldigung, um das auszugraben, aber ich vermute, dass ich etwas nicht verstehe. Die Tipps auf dem Blogbeitrag scheinen über das Verstecken von Text zu sein, während die Schrift geladen wird, aber was ist, wenn ich nur z. Chrome, um es so schnell wie möglich zu laden und nicht, wenn es Text mit dieser Schriftart trifft? Ist meine beste Option ein verstecktes div in
? –Ich tat dies, indem ich einige Buchstaben in meinem Hauptdokument hinzufügte und es transparent machte und die Schriftart gab, die ich laden wollte.
z.B.
<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
Vor kurzem wurde ich an einem Spiel arbeiten kompatibel mit CocoonJS mit DOM beschränkt sich auf das Canvas-Element - hier ist mein Ansatz:
Mit fillText mit einer Schriftart, die bisher noch nicht richtig ausführen wird geladen hat, aber mit kein visuelles Feedback - damit die Canvas-Ebene intakt bleibt, müssen Sie die Canvas in regelmäßigen Abständen auf Änderungen überprüfen (z. B. das Durchlaufen von getImageData nach nicht transparenten Pixeln), wenn die Schriftart ordnungsgemäß geladen wird.
Ich habe diese Technik ein wenig mehr in meinem kürzlich erschienenen Artikel erklärt http://rezoner.net/preloading-font-face-using-canvas,686
Google hat eine schöne Bibliothek dafür: https://developers.google.com/webfonts/docs/webfont_loader Sie können fast alle Schriften verwenden und die lib werden Klassen in den HTML-Tag hinzufügen.
Es gibt sogar Javascript-Ereignisse, wenn centrain-Fonts geladen und aktiv sind!
Vergessen Sie nicht, Ihre Fontdateien gezippt zu bekommen! es wird sicherlich die Dinge beschleunigen!
Das richtige Laden von Schriftarten ist ein großes Loch in der HTML5-Spezifikation. Ich habe all diese Sachen durchgegangen und die zuverlässigste Lösung, die ich gefunden habe, ist Font zu benutzen.js:
http://pomax.nihongoresources.com/pages/Font.js/
Sie können es verwenden Schriftarten laden die gleiche API Sie verwenden, um Bilder zu laden
var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function() {
console.log("font loaded");
}
Es ist viel einfacher und leichter als Google's hulking Webfont Loader
Hier ist die GitHub Repo für Font.js:
Eine einfache Technik ist dies irgendwo in Ihrem Index zu setzen:
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
<span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
...
</div>
auf Chrome Getestet 34, Safari 7 und FF 29 und IE 11
Via Google webfontloader
var fontDownloadCount = 0;
WebFont.load({
custom: {
families: ['fontfamily1', 'fontfamily2']
},
fontinactive: function() {
fontDownloadCount++;
if (fontDownloadCount == 2) {
// all fonts have been loaded and now you can do what you want
}
}
});
Der Typ über dir gab die gleiche Antwort 2 Jahre vor dir ..warum hast du es noch einmal gemacht? Ich bin neugierig – vsync
Meine Antwort gibt nur ein Code-Snippet, mit dem Menschen mehrere Schriftarten mit Webfontloader laden können. Die vorherige Antwort gibt eine nette Einführung in webfontloader, enthält aber kein Code-Snippet. –
Sie sollten es bearbeitet haben, anstatt es zu wiederholen und ein Codebeispiel hinzuzufügen. es ist sehr verwirrend und Verschwenden von Scroll um fast identische Antworten zu haben, die sich in Fragen wiederholen. – vsync
2017 : Sie haben jetzt preload
MDN: Der Vorspannwert e des rel-Attributs des Elements ermöglicht es Ihnen, in Ihrem HTML-Code deklarative Abrufanforderungen zu schreiben, die Ressourcen angeben, die Ihre Seiten sehr bald nach dem Laden benötigen. Sie möchten daher früh im Lebenszyklus einer Seite laden die Hauptrenderingmaschinerie des Browsers tritt ein. Dieses stellt sicher, dass sie früher verfügbar gemacht werden und sind weniger wahrscheinlich, den ersten Putz der Seite zu blockieren und führen zu Leistungsverbesserungen.
<link rel="preload" href="/fonts/myfont.eot" as="font" />
prüfen browser compatibility.
Es ist am nützlichsten für das Laden von Schriftarten (nicht warten auf den Browser, um es in einigen CSS zu finden). Sie können auch einige Logos, Symbole und Skripts vorab laden.
Verwenden Sie den Standard CSS Font Loading API.
Warten (alle) die Schriftarten zu laden, und dann zeigen Sie Ihren Inhalt:
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
document.getElementById('waitScreen').style.display = 'none';
});
Können Sie Höhe/Zeilenhöhe nicht angeben, um den Sprung-Effekt zu vermeiden? – kangax
guter Ort zum Starten https://css-tricks.com/fout-foit-foft/ – TarranJones
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content –