wake-up-neo.com

@ Font-face-Schriftarten vorab laden?

Ist es möglich, @ font-face-Schriftarten vor dem Laden der Seite zu laden oder auf andere Weise zwischenzuspeichern, bevor die Seite geladen wird, sodass der hässliche Sprung beim endgültigen Laden der Seite nicht auftritt?

javascriptcssfontsembeddingfont-face
44
dougoftheabaci

Mir ist keine aktuelle Technik bekannt, um das Flimmern beim Laden der Schrift zu vermeiden. Sie können sie jedoch minimieren, indem Sie die richtigen Cache-Header für Ihre Schrift senden und sicherstellen, dass diese Anforderung so schnell wie möglich durchgeht.

1
Gabriel Hurley

Eine einfache Technik besteht darin, dies irgendwo in Ihren Index zu schreiben:

<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>

Getestet auf Chrome 34, Safari 7 und FF 29 und IE 11

28
Rafouille

Es gibt ein paar Techniken zum "Vorladen" hier: http://paulirish.com/2009/fighting-the-font-face-fout/

Meistens wird der Browser dazu gebracht, die Datei so schnell wie möglich herunterzuladen.

Sie können es auch als Daten-URI liefern, was sehr hilfreich ist. Außerdem können Sie den Seiteninhalt ausblenden und anzeigen, wenn er fertig ist.

22
Paul Irish

2017: Sie haben jetzt Vorspannung

MDN: Mit dem Vorladewert des rel-Attributs des Elements können Sie Schreiben Sie deklarative Abrufanforderungen in Ihren HTML-Code und geben Sie .__ an. Ressourcen, die Ihre Seiten sehr bald nach dem Laden benötigen, die Sie Daher möchten Sie das Vorladen frühzeitig im Lebenszyklus einer Seite starten load, bevor die Haupt-Rendering-Maschine des Browsers startet. Diese stellt sicher, dass sie früher verfügbar sind und weniger wahrscheinlich sind Blockieren Sie das erste Rendern der Seite, was zu Leistungsverbesserungen führt.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

Browserkompatibilität prüfen .

Es ist am nützlichsten für das Laden von Schriftarten (nicht warten, bis der Browser sie in einigen CSS-Dateien findet). Sie können auch einige Logos, Symbole und Skripts vorladen.

Andere Techniken Pro/Cons werden diskutiert hier (nicht mein Blog).

13
Christophe Roussy

Das richtige Vorladen von Schriftarten ist ein großes Loch in der HTML5-Spezifikation .. Ich habe all das durchgelesen und die zuverlässigste Lösung, die ich gefunden habe, ist die Verwendung von Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

Sie können damit Schriftarten mit derselben API laden, die Sie zum Laden von Bildern verwenden

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

Es ist viel einfacher und leichter als Googles Webfont Loader

Hier ist das Github-Repo für Font.js:

https://github.com/Pomax/Font.js

5
d13

Dies sollte dein Problem lösen.

Um Ihre erste Frage zu beantworten: Ja, Sie können. Nur Gecko- und WebKit-Browser unterstützen es derzeit jedoch.
Sie müssen nur Link-Tags in Ihrem Kopf hinzufügen:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
3
Knu

ich tat dies, indem ich meinem Hauptdokument einen Buchstaben hinzufügte, ihn transparent machte und die Schriftart, die ich laden wollte, zugewiesen hat.

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>
2
Trent

Über 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
        }
    }
});
1
Razan Paul

Verwenden Sie den Standard CSS Font Loading API .

Warten Sie, bis (all) die Schriftarten geladen werden, und zeigen Sie dann Ihren Inhalt an:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Demo CodePen .

0
yPhil

Google hat dafür eine schöne Bibliothek: https://developers.google.com/webfonts/docs/webfont_loader .__ Sie können fast alle Schriftarten verwenden, und die Bibliothek fügt dem html-Tag Klassen hinzu. 

Es gibt sogar Javascript-Ereignisse, wann Certrain-Schriftarten geladen und aktiv sind!

Vergessen Sie nicht, Ihre Schriftdateien gezippt zu liefern! es wird sicherlich die Dinge beschleunigen!

0
Miguel Alejandro Fuentes Lopez

Kürzlich habe ich an einem Spiel gearbeitet, das mit CocoonJS kompatibel ist, wobei DOM auf das Canvas-Element beschränkt ist - hier ist mein Ansatz:

Die Verwendung von fillText mit einer noch nicht geladenen Schriftart wird ordnungsgemäß ausgeführt, aber ohne visuelle Rückmeldung - so bleibt die Zeichenebene erhalten. Sie müssen lediglich die Zeichenfläche regelmäßig auf Änderungen überprüfen (z. B. das Durchlaufen von getImageData auf der Suche nach beliebigen Zeichen) nicht transparentes Pixel), das auftritt, wenn die Schrift ordnungsgemäß geladen wird.

Ich habe diese Technik in meinem letzten Artikel etwas ausführlicher erklärt http://rezoner.net/preloading-font-face-using-canvas,686

0
rezoner