Wie kann ich beim Laden der Seite eine Web-Schriftart laden, z.

Question

Diese Frage bezieht sich auf Situationen, in denen die Web-Schriftart nicht auf der Hauptseite erforderlich ist, und ist zunächst in einem div Satz zu display:none;

Ich habe eine Web-Seite, die eine versteckte Form via Javascript auf klicken und dieses Formular verwendet lädt eine Webschrift. Mein Problem ist, dass es eine Verzögerung von einer Sekunde gibt, wenn der Benutzer klickt, um das Formular zu enthüllen, wie es in diesem Moment ist. Chrome lädt die woff2 Datei herunter.

Dies ist nicht sehr schön für die Benutzerfreundlichkeit.

Ich muss den Webfont vorladen, da ich keine Verwendung für die Schriftart auf der Hauptseite habe, also gibt es nichts, was Chrome veranlassen würde, die woff2 Datei zu holen, bevor der Benutzer klickt, um das versteckte Formular aufzudecken.

Ich bemerkte, dass dies egal ist, wenn Sie die Schriftart Awesome auf Ihrem Server hosten oder das CDN verwenden.

Ich schaute im Internet um zu sehen, was getan werden konnte, versuchte ich alle unten und nichts davon geholfen, nichts verursachte die woff2 Datei auf der Seite laden geladen, es wurde nur geladen, wenn die Webseite aktiv benötigt Schriftart.

Versuch 1: Preload

<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 war auf der Suche um mögliche Lösungen mit Javascript basierten Laden, etwas, was ich wirklich wollte nicht gehen in der Nähe, also was sind meine Optionen hier zu sehen, fing ich an?

Answer 1

Ich habe diese einfache Lösung gefunden, es wurde nur an Chrome getestet, aber es ist ziemlich einfach für meinen Anwendungsfall, ich kann mir nicht vorstellen, dass es in keinem modernen Browser funktioniert.

Ich beschloss, laden Sie die woff2 Datei durch Laden einer Schriftart auf meiner Hauptseite, aber stellen Sie sicher, dass die Benutzer es nicht sehen können.

Wie ich bereits entdeckt, Chrome holen keine Ressourcen, die von jedem div erforderlich sind, die also hier display:none;

gesetzt ist, statt meine Lösung.

CSS

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

HTML

<!-- This fake div hidden preloads our web font! --> 
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div> 

Nun lädt der Browser die woff2 Ressource auf Seite laden, so dass, wenn meine Benutzer auf eine Schaltfläche klicken die versteckte Form aufzuzeigen, die Web-Schriftart wird sofort geladen.

Answer 2

Sie brauchen kein verstecktes Div, um Ihre Schrift zu arbeiten. Solange Sie einen unterstützten Browser verwenden (Bild von w3schools), sollte die Regel css @font-face funktionieren.

Sie können auch mehr Schriftformate wie folgt hinzufügen:

@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'); 
} 

Answer 3

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

Web Font Loader gibt Ihnen die Kontrolle hinzugefügt bei der Verwendung von verknüpfte Schriftarten über @ font-face. Es bietet eine allgemeine Schnittstelle zum Laden von Zeichensätzen unabhängig von der Quelle und fügt dann einen Standardsatz von Ereignissen hinzu, mit denen Sie das Ladeerlebnis steuern können. Der Web Font Loader kann Schriftarten von Google Fonts, Typekit, Fonts.com und Fontdeck sowie selbst gehostete Webschriftarten laden. Es wird von Google und Typekit mitentwickelt.