Wie kann ich das laden einer web-font wie font awesome auf die Seite laden?

Diese Frage gilt für Situationen, in denen die web-font ist nicht erforderlich, auf der Hauptseite und wird zunächst innerhalb einer div eingestellt display:none;

Ich habe eine web-Seite lädt, die eine versteckte form per Javascript beim klicken und dieses Formular verwendet eine web-schriftart. Mein Problem ist, dass es in einer Sekunde Verzögerung, wenn der Benutzer auf, zu offenbaren, form, wie es in diesem moment Chrome lädt die woff2 Datei.

Ist das nicht sehr schön für die user experience.

Brauche ich zum laden der webfont da ich keine Verwendung für die Schrift auf der Hauptseite, es gibt also nichts zu verursachen Chrome zu Holen, die woff2 - Datei, bevor der Benutzer klickt, um den ausgeblendeten Formular.

Bemerkte ich, dass dies egal ist, wenn Sie hosting der Font Awesome auf Ihrem server oder mit dem CDN.

Ich schaute mich im internet um, um zu sehen, was getan werden könnte, ich habe versucht, alle unten, und keiner hat es geholfen, nichts verursacht die woff2 - Datei zu laden, die beim laden der Seite, ist es immer nur geladen, wenn die Webseite aktiv benötigt die schriftart.

Versuch 1: Vorspannung

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">

oder

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font">

Versuch 2: Prefetch

<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2">

Versuch 3: CSS -

@font-face {
    font-family: 'Font-Awesome';
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");;
}

Als ich sah mich um, begann ich zu sehen, mögliche Lösungen mit Javascript-basierte laden, so etwas möchte ich wirklich nicht in die Nähe gehen, also, was sind meine Optionen hier?

welcher browser sind Sie das testen in?
Chrome Version 47.0.2526.111 m

InformationsquelleAutor Joseph | 2016-02-01

14

Landete ich mit dieser einfachen Lösung, es wurde noch nicht getestet auf etwas anderes als Chrome, aber es ist ziemlich einfach für meinen Anwendungsfall, ich kann mir nicht vorstellen, dass es nicht funktioniert auf jedem modernen browser.

Entschied ich mich zu zwingen, laden Sie die woff2 - Datei durch das laden einer schriftart auf mein Haupt-Seite, sondern gewährleisten, dass Benutzer können es nicht sehen.

Als ich schon entdeckt, Chrome nicht zu Holen Ressourcen, die erforderlich sind, von jeder div zum display:none;

So, hier ist meine Lösung statt.

CSS
```
.div-fake-hidden {
    width:0px;
    height:0px;
    overflow:hidden;
}
```
HTML
```

<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div>
```
Nun der browser lädt die woff2 Ressource auf der Seite geladen, so dass, wenn meine Anwender auf eine Schaltfläche klicken, um den ausgeblendeten Formular, das web font lädt sofort.
- Getestet mit dem neuesten Firefox und Edge. Funktioniert auch auf beide.
- Brilliant ; Funktioniert mit Anwohner Manfred Meier zu.
InformationsquelleAutor Joseph
1

brauchen Sie keine versteckten div, um Ihre schriftart zu arbeiten. Solange Sie mit einem unterstützten browser (Bild von w3schools) die css - @font-face Regel sollte funktionieren.

Außerdem können Sie weitere Schriftformate wie folgt:
```
@font-face {
font-family: 'Font-Awesome';
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"),
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype');
}
```
- Ich kann sehen, dass es sagt, dass Chrome sollte gearbeitet haben, aber es wäre nicht die Vorspannung der woff2 Datei bei meinen tests.
- Sind Sie eigentlich mit der schriftart in die Webseite außerhalb des versteckten div?
- Ja, aber nur auf einer versteckten form, die angezeigt wird, wenn der Benutzer drückt die Schaltfläche "senden", dann jQuery entfernt meine div-hidden Klasse von der zweiten form, und es ist auf diesem Formular, dass ich mit Font Awesome. Das ist mein Problem, die Schriftart Awesome ist es nicht notwendig, bis ich das einblenden der form (ich bin mit dem Font Awesome für die check-Boxen). Es ist alles auf der gleichen Seite, aber Chrome lädt keine woff2 - Datei, bis mein jQuery blendet das Formular aus. Dadurch ergibt sich eine sehr hässliche Verzögerung. Jedoch wird keine Seite neu laden tritt, ist es, alle auf der gleichen Seite.
- Können Sie Font-awesome irgendwo anders auf der Seite, die nicht zunächst versteckt? Header? Absätze? Titel?
- Oder vielleicht könnten Sie die verborgenen von Anfang an so sichtbar und verstecken Sie ihn nach 5 Sekunden oder so etwas. Dann die schriftart beginnen würde geladen, bevor der Benutzer das Formular öffnet...
- Ja, ich habe es in mein CSS wie oben (Versuch 3), ist völlig geladen laden der Seite. Aber Chrome weigerte sich zu Holen, die woff2 Datei, bis die form wurde sichtbar. Ich könnte versuchen, @font-face im Firefox zu sehen, ob das funktioniert dort.
- Ich kann nicht meine form sichtbar ist, wird es zu Auffällig, selbst für einen Bruchteil einer Sekunde. Im moment ist meine Lösung, die funktioniert und Ergebnisse in keinen Verzögerungen kommen, da die schriftart ist nicht erforderlich, bis das versteckte Formular wird eingeblendet. Natürlich ist es kein standard, aber wahrscheinlich universal,
InformationsquelleAutor MoralCode
0

Könnten Sie versuchen, mithilfe von Web Font Loader: https://github.com/typekit/webfontloader

Web Font Loader gibt Ihnen mehr Kontrolle bei der Verwendung von verknüpften fonts über @font-face. Es bietet eine gemeinsame Schnittstelle zum laden von Schriftarten unabhängig von der Quelle, dann fügt ein standard-set von Ereignissen, die Sie möglicherweise verwenden, um die Belastung zu erleben. Das Web Font Loader ist in der Lage, laden von Schriftarten von Google Fonts, Typekit, Fonts.com und Fontdeck, als auch als self-hosted-web-fonts. Es wird co-entwickelt von Google und Typekit.

InformationsquelleAutor Oscar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.