Warten Sie, bis die Schriftarten geladen sind, bevor Sie die Webseite

laden. Ich verwende @ font-face, um Schriftarten in meine Website einzubetten. Zuerst rendert der Text als Systemstandard, und dann (nachdem die Schriftartdatei vermutlich geladen wurde) rendert die richtige Schriftart einen Bruchteil einer Sekunde später. Gibt es eine Möglichkeit, diese Verzögerung zu minimieren/zu beseitigen, indem das Seitenrendering verzögert wird, bis die Zeichensätze geladen sind oder ähnliches.Warten Sie, bis die Schriftarten geladen sind, bevor Sie die Webseite

Quelle

2011-01-17 wheresrhys

Caching-Schriften funktionieren würde. – Krii

Beachten Sie, dass dies eine gute Möglichkeit ist, Ihre Website sehr langsam erscheinen zu lassen, da Benutzer auf einer drahtlosen Verbindung eine Weile brauchen, um die Webschriftarten zu laden. Viele Benutzer drücken einfach die Zurück-Taste, wenn der Text nicht innerhalb von ein paar Sekunden angezeigt wird. – erjiang

Dies hängt davon ab, wie sich der Browser verhält.

Zuerst, wo ist Ihr @font deklariert? Ist es inline zu Ihrem HTML, in einem CSS-Sheet auf der Seite deklariert oder (hoffentlich) in einem externen CSS-Sheet deklariert?

Wenn es nicht in einem externen Blatt ist, versuchen Sie, es zu einem zu verschieben (das ist normalerweise sowieso besser).

Wenn das nicht hilft, müssen Sie sich fragen, ist der Bruchteil einer Sekunde Unterschied wirklich erheblich schädlich für die Benutzererfahrung? Wenn dies der Fall ist, dann bedenken Sie JavaScript, es gibt ein paar Dinge, die Sie tun können, Weiterleitungen, Pausen etc., aber diese könnten tatsächlich schlechter als das ursprüngliche Problem sein. Schlimmer für Benutzer und schlechter zu pflegen.

könnte Dieser Link helfen:

http://paulirish.com/2009/fighting-the-font-face-fout/

Quelle

2011-01-17 10:49:07

Das Beste, was Sie tun können, ist Toms Ratschlag zu befolgen und zusätzlich sicherzustellen, dass Ihre Clients beim nachfolgenden Laden der Seite nicht auf den Webserver treffen, da dies ein echter Font-Renderer ist - setzen Sie einen Ablauf-Header für die CSS-Datei und a Whooping One auf die tatsächliche Font-Ressource und Ihr Gut zu gehen. –

Schöner Artikel. Hoffen wir, dass Firefox den Safari-Ansatz zum Laden von Schriften in einer nicht zu weit entfernten Version übernimmt. Das FOUT war in der Vergangenheit kein Problem für mich, aber für die aktuelle Seite, an der ich arbeite, unterscheidet sich die benutzerdefinierte Schriftart sehr von allen Systemschriftarten, so dass der Blitz zum ersten Mal sehr auffällig ist. – wheresrhys

Eine große Schrift (d. H. 200 Kb) und eine langsame Verbindung (d. H. 3G) sind nicht ein Bruchteil einer Sekunde. Designer sollten dieses Szenario für diejenigen mit Tablets mit einem SIM-Chip in Betracht ziehen. – Jaime

-5

Vielleicht so etwas wie:

$("body").html("<img src='ajax-loader.gif' />");

Dann, wenn die Seite geladen wird, körper Inhalt mit dem eigentlichen Inhalt ersetzen und hoffentlich vollständig gerenderten Schriftarten, müssen Sie allerdings damit spielen, um ...

Quelle

2011-01-17 10:47:30 benhowdle89

Nur Lasten IE die Schriftart und dann auf der Seite den Rest. Die anderen Browser laden Dinge aus einem bestimmten Grund gleichzeitig. Stellen Sie sich vor, dass ein Problem mit dem Server besteht, der die Schriftart hostet oder mit der Schriftart heruntergeladen wird. Sie werden Ihre gesamte Website aufhängen, bis die Schriftart geladen ist. Meiner Meinung nach ist ein Blitz von unstyled Text besser, als die Seite überhaupt nicht zu sehen

Quelle

2011-01-17 10:51:47 nunopolonia

Nun, außer wenn Sie die Schriftart auf der gleichen Website hosten. –

Auch, außer wenn die Schriftart Bootstrap Glyphe Icons ist –

Auch, außer wenn Sie die Pixelgröße eines Glyphs wissen müssen. –

Joni Korpi hat einen schönen Artikel zum Laden von Schriftarten vor dem Rest der Seite.

http://jonikorpi.com/a-smoother-page-load/

Er verwendet auch eine loading.gif die Verzögerung zu lindern, so dass Benutzer nicht frustriert werden.

Quelle

2012-02-09 21:12:52 davecave

-4

(function() { 
     document.getElementsByTagName("html")[0].setAttribute("class","wf-loading") 
     document.getElementsByTagName("html")[0].setAttribute("className","wf-loading") 
    })();

Verwendung dieser Methode .. verwenden, um mit Webfont.js

Quelle

2012-03-09 06:27:04

Edit: Der beste Ansatz ist wahrscheinlich base64 Ihre Schriften in eine CSS-Datei kodieren. Dies bedeutet, dass Ihre Schriftart vollständig geladen werden muss, wenn Ihr HTML analysiert und angezeigt wird. Sie können dies mit font squirrels webfont generator https://www.fontsquirrel.com/tools/webfont-generator tun, indem Sie auf "Expert" und dann auf "base64 encode" klicken. So funktionieren Dienste wie TypeKit.

Ursprüngliche Antwort: Eine andere Möglichkeit, um herauszufinden, ob Schriftarten geladen verwenden würde Fontloader https://github.com/smnh/FontLoader oder durch ihre Strategie zu kopieren.

Sie binden an das Bildlaufereignis im Browser, denn wenn die Schriftart geladen wird, ändert sich die Größe des Textes. Es verwendet zwei enthaltende divs (die scrollen, wenn sich die Höhe ändert) und ein separates Fallback für IE.

Eine Alternative ist, das DOM regelmäßig mit setInterval zu überprüfen, aber JavaScript-Ereignisse ist viel schneller und überlegen.

Offensichtlich können Sie etwas tun, wie die Deckkraft von Körper auf 0 setzen und es dann anzeigen, sobald die Schriftart geladen wird.

Quelle

2014-05-21 22:17:35

Verwenden https://github.com/typekit/webfontloader

und überprüfen Sie die Ereignisse in der Konfiguration https://github.com/typekit/webfontloader#configuration

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> 
    WebFont.load({ 
     custom: { 
      families: [ 'CustomFont1', 'CustomFont2' ] 
     }, 
     active: function() { 
      //render your page 
     }, 
    }); 
</script>

Quelle

2017-01-20 13:38:29 klodoma