Vorladen von @ font-face-Schriftarten?

76

Ist es möglich, @ font-face-Schriftarten vorzuladen oder auf andere Weise zwischenzuspeichern, höchstwahrscheinlich mit Javascript, bevor die Seite geladen wird, damit Sie diesen hässlichen Sprung nicht bekommen, wenn die Seite endlich geladen wird?

javascript css fonts embedding font-face
quelle
2
Können Sie keine Höhe / Linienhöhe angeben, um einen Springeffekt zu vermeiden?
Kangax
1
guter Ort, um css-tricks.com/fout-foit-foft
TarranJones
developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Christophe Roussy
stackoverflow.com/a/42683378/7314900
jay surya

Antworten:

4

Mir ist keine aktuelle Technik bekannt, mit der das Flimmern beim Laden der Schriftart vermieden werden kann. Sie können sie jedoch minimieren, indem Sie die richtigen Cache-Header für Ihre Schriftart senden und sicherstellen, dass diese Anforderung so schnell wie möglich ausgeführt wird.

Gabriel Hurley
quelle
42

Seit 2017 hast du Vorspannung

MDN: Mit dem Preload-Wert des rel-Attributs des Elements können Sie deklarative Abrufanforderungen in Ihren HTML-Code schreiben und Ressourcen angeben, die Ihre Seiten sehr bald nach dem Laden benötigen. Sie möchten daher frühzeitig im Lebenszyklus eines Seitenladens mit dem Preload beginnen Die Haupt-Rendering-Maschinerie des Browsers wird aktiviert. Dadurch wird sichergestellt, dass sie früher verfügbar gemacht werden und das erste Rendern der Seite mit geringerer Wahrscheinlichkeit blockiert wird, was zu Leistungsverbesserungen führt.

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

Überprüfen Sie immer die Browserkompatibilität .

Es ist am nützlichsten für das Vorladen von Schriftarten (ohne darauf zu warten, dass der Browser es in einigen CSS findet). Sie können auch einige Logos, Symbole und Skripte vorladen.

Christophe Roussy
quelle
14
crossoriginist auch dann erforderlich, wenn die Schriftart vom selben Ursprung geladen wird . Auch gut, um einen Typ-Hinweis zu geben.
Okku
@IlpoOksanen fügte es jetzt hinzu
Christophe Roussy
Aber wie kann man der geladenen Schrift den Namen der Schriftfamilie zuweisen?
Don Dilanga
@ DonDilanga Ich denke, das ist etwas, was Sie über CSS tun müssen
Christophe Roussy
40

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

<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

Rafouille
quelle
1
Dies funktionierte in meiner Situation perfekt, um Schriftarten für die Verwendung in FabricJS vorinstalliert zu bekommen. Vielen Dank.
Brandon
23

Hier gibt es einige Techniken zum "Vorladen": http://paulirish.com/2009/fighting-the-font-face-fout/

Meistens den Browser dazu bringen, 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.

Paul Irish
quelle
3
Tut mir leid, das herauszufinden, aber ich vermute, ich verstehe etwas nicht. Die Tipps im Blog-Beitrag scheinen sich mit dem Ausblenden von Text zu befassen, während die Schriftart geladen wird. Was ist jedoch, wenn ich nur möchte, dass Chrome ihn so schnell wie möglich lädt und nicht, wenn er auf Text mit dieser Schriftart stößt? Ist meine beste Option ein verstecktes Div im <head>?
Eli Rose - WIEDERHERSTELLEN MONICA
6

Ihr Kopf sollte die Vorspannung rel wie folgt enthalten:

<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 wird woff2 von Browsern vorinstalliert, die das Vorladen unterstützen, und alle Fallback-Formate werden wie gewohnt geladen.
Und Ihre CSS-Schriftart sollte ähnlich 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');
}
Andrei
quelle
Es ist gut, die folgenden Attribute type = "font / woff2" und crossorigin zu <link> hinzuzufügen , um Browserfehler zu vermeiden. Ansonsten war dies die beste Antwort für meinen Fall.
MartinG
5

Das richtige Vorladen von Schriftarten ist eine große Lücke in der HTML5-Spezifikation. Ich habe all diese Dinge durchgearbeitet 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, mit der Sie Bilder laden

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

Es ist viel einfacher und leichter als Googles riesiger Webfont Loader

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

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

d13
quelle
4

Über den Webfontloader von Google 

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
        }
    }
});
Razan Paul
quelle
Der Typ über dir gab 2 Jahre vor dir genau die gleiche Antwort. Warum hast du dir die Mühe gemacht, sie noch einmal zu schreiben? Ich bin neugierig
vsync
Meine Antwort enthält nur einen Code-Ausschnitt, mit dem Benutzer mehrere Schriftarten mit dem Webfontloader laden können. Die vorherige Antwort bietet eine nette Einführung in den Webfontloader, enthält jedoch kein Code-Snippet.
Razan Paul
Sie sollten es bearbeitet haben, anstatt es zu wiederholen und ein Codebeispiel hinzuzufügen. Es ist sehr verwirrend und eine Verschwendung von Schriftrollen, fast identische Antworten zu haben, die sich in Fragen wiederholen.
vsync
2

Dies sollte Ihr Problem lösen.

Um Ihre erste Frage zu beantworten: Ja, das können Sie . Derzeit wird dies jedoch nur von Gecko- und WebKit-Browsern unterstützt.
Sie müssen nur Link-Tags in Ihrem Kopf hinzufügen:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
Knu
quelle
Sie sollten vorsichtig sein, wenn Sie Inhalte auf Ihrer Seite vorrendern. Es ist nicht dasselbe wie Prefetching.
Kleinfreund
2
warum prerendernicht preload? Es ist eine Schriftart, keine HTML-Datei, es gibt nichts zu rendern
vsync
2

Dazu habe ich einen Brief in mein Hauptdokument eingefügt, ihn transparent gemacht und die Schriftart zugewiesen, 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>
Trent
quelle
1

Verwenden Sie die Standard- API zum Laden von CSS-Schriftarten .

Warten Sie, bis ( alle ) Schriftarten geladen sind, 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 .

yPhil
quelle
Dies wird jetzt sehr häufig unterstützt: API zum Laden von Schriftarten . Mehr als font-display: font-display
jamess
1

Wie ich festgestellt habe, ist es am besten, ein Stylesheet vorzuladen, das die Schriftart enthält, und es dann vom Browser automatisch laden zu lassen. Ich habe das Schriftbild an anderen Stellen (auf der HTML-Seite) verwendet, aber dann konnte ich den Effekt des Schriftwechsels kurz beobachten.

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

Geben Sie dann in der Datei font.css Folgendes an.

@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 Schriftarten keinen Namen zuweisen, wenn sie über das Link-Tag vorinstalliert sind (korrigieren Sie mich, wenn ich falsch lag, konnte ich noch keinen Weg finden). Daher müssen Sie Schriftart verwenden, um der Schrift den Namen zuzuweisen. Obwohl es möglich ist, eine Schriftart über ein Link-Tag zu laden, wird dies nicht empfohlen, da Sie der Schriftart damit keinen Namen zuweisen können. Ohne einen Namen wie bei font-face können Sie ihn nirgendwo auf der Webseite verwenden. Laut gtmetrix wird das Stylesheet am Anfang geladen, dann die restlichen Skripte / Stile nach Reihenfolge, dann die Schriftart vor dem Laden von dom, und daher sehen Sie keinen Effekt zum Ändern der Schriftart.

Don Dilanga
quelle
0

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 Schriftart, die noch nicht geladen wurde, wird ordnungsgemäß ausgeführt, jedoch ohne visuelles Feedback. Die Canvas-Ebene bleibt also intakt. Sie müssen lediglich den Canvas-Bereich regelmäßig auf Änderungen überprüfen (z. B. eine Schleife durch getImageData, um nach Änderungen zu suchen (nicht transparentes Pixel), das auftritt, wenn die Schriftart ordnungsgemäß geladen wird.

Ich habe diese Technik in meinem letzten Artikel http://rezoner.net/preloading-font-face-using-canvas,686 etwas näher erläutert

Rezoner
quelle
0

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 Ihnen sogar Javascript-Ereignisse, wenn bestimmte Schriftarten geladen und aktiv sind!

Vergessen Sie nicht, Ihre gezippten Schriftdateien zu bedienen! es wird sicherlich die Dinge beschleunigen!

Miguel Alejandro Fuentes Lopez
quelle