Preloading @ font-face-Schriften?

Question

Ist es möglich, Vorbelastung oder sonst Cache @ font-face Schriftarten, höchstwahrscheinlich mit Javascript, bevor die Seite geladen wird, so dass Sie nicht so hässlich Sprung bekommen Sie, wenn die Seite endlich geladen wird?

Answer 1

Ich bin mir nicht bekannt, dass aktuelle Technik, um das Flimmern, wie die Schrift Lasten zu vermeiden, aber Sie es durch das Senden richtigen Cache-Header für Ihre Schrift zu minimieren und sicherzustellen, dass die Anfrage so schnell wie möglich geht.

Answer 2

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>

Getestet auf Chrome 34, Groß 7 und FF 29 und 11 IE

Answer 3

Es gibt ein paar Techniken für „Vorbelastung“ hier: http://paulirish.com/2009/fighting-the-font-face- fout /

Vorwiegend den Browser in trickst die Datei so schnell wie möglich den Download ..

Sie können auch als Daten-uri liefern, die viel hilft. und auch Sie können den Seiteninhalt verstecken und zeigen Sie es, wenn sein bereit.

Answer 4

2017: Sie jetzt haben Vorbelastung

  

MDN: Der Wert der Vorbelastung des rel-Attribut des Elements ermöglicht es Ihnen,   Schreib deklarative Anfragen in Ihrem HTML holen, unter Angabe   Ressourcen, dass Ihre Seiten nach dem Laden sehr bald benötigen, die Sie   deshalb will früh im Lebenszyklus einer Seite starten Vorbelastung   laden, bevor die Haupt-Rendering-Maschinen Tritte Browser in. Diese   Stellt sicher, dass sie früher verfügbar und sind weniger gemacht werden wahrscheinlich   blockiert die Seite des ersten machen, was zu Leistungsverbesserungen.

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

Überprüfen Sie Browser-Kompatibilität .

Es ist sehr nützlich für die Schrift Vorbelastung (nicht warten auf den Browser es in einigen CSS zu finden). Sie können auch einige Logos, Symbole und Skripte vorzuladen.

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

Answer 5

Die richtige Schrift Vorbelastung ist ein großes Loch in der HTML5-Spezifikation. Ich habe durch all dieses Zeug weg und die zuverlässigste Lösung, die ich gefunden habe, ist Font.js zu verwenden:

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

Sie können es verwenden, um Schriftarten laden die gleiche API verwenden Sie laden Bilder 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 hulking Webfont Loader

Hier ist der GitHub Repo für Font.js:

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

Answer 6

Diese sollte Ihr Problem lösen.

Um Ihre erste Frage zu beantworten: Ja, Sie können . Nur Gecko und Webkit-Browser es unterstützt derzeit though.
Sie müssen nur Link-Tags im Kopf hinzuzufügen:

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

Answer 7

Über Google ist 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
        }
    }
});

Answer 8

Ich tat dies, indem Sie einige Buchstaben in meinem Hauptdokument hinzugefügt und machte es transparent und zugewiesen die Schrift, dass ich laden wollte.

z.

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

Answer 9

Verwenden Sie den Standard CSS Font Laden API .

Warten Sie ( 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';
});

Demo CodePen .

Answer 10

Vor kurzem arbeite ich an einem Spiel kompatibel mit CocoonJS mit DOM auf das Canvas-Element beschränkt - hier ist mein Ansatz:

Mit fillText mit einer Schriftart, die bisher noch nicht richtig ausführen wird geladen hat, aber ohne visuelles Feedback - so die Leinwand Ebene intakt bleiben - alles, was Sie tun müssen, ist die Leinwand für alle Änderungen in regelmäßigen Abständen überprüfen (zB Durchschleifen getImageData Suche für alle nicht transparente Pixel), die richtig, wenn die Schrift Lasten passieren wird.

Ich habe diese Technik erklärt ein wenig mehr Bit in meinem kürzlich erschienenen Artikel http: / /rezoner.net/preloading-font-face-using-canvas,686

Answer 11

Google hat eine schöne Bibliothek für diese: 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 Sie Ereignisse auf, wenn certrain Schriftarten geladen und aktiv!

Vergessen Sie nicht, Ihre fontfiles gzipped zu dienen! es wird sicherlich die Dinge beschleunigen!

Answer 12

gefunden, als ich die beste Art und Weise tut, wird ein Stylesheet Vorbelastung, der die Schriftart enthält, und dann Browser lassen Sie es automatisch zu laden. Ich benutzen die font-face an anderen Orten (in der HTML-Seite), aber dann konnte ich die Schriftart zu ändern Effekt kurz beobachten.

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

dann in der font.css Datei geben, wie folgend.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

Sie können keinen Namen Schriftarten zuweisen, wenn es durch Link-Tag vorbelastet ist (korrigiert mich wenn ich falsch war, konnte ich nicht einen Weg noch finden), und damit haben Sie font-face verwenden, um den Namen der zuweisen Schriftart. Auch wenn es möglich ist, eine Schriftart durch Link-Tag zu laden, ist es nicht zu empfehlen, da Sie keinen Namen die Schriftart mit ihm zuweisen können. Ohne einen Namen wie mit font-face, Sie werden es nicht überall auf der Web-Seite nutzen können. Nach gtmetrix, Stylesheet lädt am Anfang, ruht dann den scripts / Stil von Ordnung, dann wird die Schriftart vor dom geladen, und daher sehen Schriftart, die Sie nicht Effekt zu ändern.

Answer 13

Der Kopf sollte die Vorspannung rel sind wie folgt:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

Auf diese Weise woff2 wird von Browsern vorinstalliert werden, dass die Unterstützung Vorbelastung und alle Ausweich Formate laden, wie sie es normalerweise tun.
Und Ihre CSS-Schriftart sollte so aussehen

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}