it-swarm.com.de

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

Ich verwende @ font-face, um Schriftarten in meine Website einzubetten. Zuerst wird der Text als Systemstandard dargestellt, und dann (wenn die Schriftartdatei vermutlich geladen wurde), wird die korrekte Schriftart einen Sekundenbruchteil später wiedergegeben. Gibt es eine Möglichkeit, diese Verzögerung zu minimieren/zu beseitigen, indem Sie das Seitenrendern so lange verzögern, bis Schriftarten geladen wurden oder ähnliches.

43
wheresrhys

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

Zuerst, wo wird dein @font deklariert? Ist es Inline zu Ihrem HTML-Code, der in einer CSS-Tabelle auf der Seite oder (hoffentlich) in einer externen CSS-Tabelle deklariert ist?

Wenn es sich nicht in einem externen Blatt befindet, verschieben Sie es auf ein anderes (dies ist in der Regel ohnehin besser).

Wenn dies nicht hilft, müssen Sie sich die Frage stellen, ob der Bruchteil eines zweiten Unterschieds wirklich für die Benutzererfahrung nachteilig ist. Wenn dies der Fall ist, sollten Sie JavaScript in Betracht ziehen. Es gibt einige Möglichkeiten, Weiterleitungen, Pausen usw., die jedoch möglicherweise schlechter sind als das ursprüngliche Problem. Schlimmer für Benutzer und schlechter zu warten.

Dieser Link könnte helfen:

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

16
Tom Gullen

Edit: Die beste Methode ist wahrscheinlich, base64 Ihre Schriftarten zu kodieren. Das bedeutet, dass Ihre Schriftart vollständig geladen werden muss, wenn Ihr HTML-Code analysiert und angezeigt wird. Sie können dies mit dem webfont-Generator von font squirrel 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 Methode zum Erkennen, ob Schriftarten geladen werden, ist FontLoader https://github.com/smnh/FontLoader oder das Kopieren der Strategie.

Sie werden an das Bildlaufereignis im Browser gebunden, da die Größe des Textes beim Laden der Schrift geändert wird. Es verwendet zwei Divs (die scrollen, wenn sich die Höhe ändert) und einen separaten Fallback für IE.

Eine Alternative besteht darin, das DOM regelmäßig mit setInterval zu überprüfen. Die Verwendung von Javascript-Ereignissen ist jedoch viel schneller und überlegener.

Natürlich können Sie so etwas wie die Deckkraft des Körpers auf 0 setzen und dann anzeigen, wenn die Schrift geladen wird.

14
Ryan Taylor

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

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

Er verwendet auch ein loading.gif, um die Verzögerung zu verringern, damit die Benutzer nicht frustriert werden. 

5
davecave

Nur IE lädt zuerst die Schriftart und dann den Rest der Seite . Die anderen Browser laden die Dinge aus einem bestimmten Grund gleichzeitig. Stellen Sie sich vor, es gibt ein Problem mit dem Server, der die Schriftart hostet, oder mit dem Herunterladen der Schriftart. Sie werden Ihre gesamte Site so lange hängen, bis die Schriftart geladen ist. Meiner Meinung nach ist ein Blitz von nicht gestyltem Text besser als die Site überhaupt nicht zu sehen

4
nunopolonia

Verwenden Sie 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>
3
klodoma

Da niemand das erwähnt hat, muss diese Frage meiner Meinung nach aktualisiert werden. Ich habe es geschafft, das Problem zu lösen, indem ich die Option "preload" benutzte, die von modernen Browsern unterstützt wird.

Falls jemand alte Browser nicht unterstützen muss.

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

einige nützliche Links mit mehr Details:

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_contenthttp://www.bramstein.com/writing/preload-hints-for-web- fonts.html

1
Ventura

Sie können die CSS-Schriftdarstellung in Ihrer @ -Anschrift verwenden. Die Schlüsselwörter für alle verfügbaren Werte sind:

  • auto 
  • block
  • wechsel 
  • zurückfallen
  • wahlweise

Giulio Mainardi hat einen Nizza-Artikel über alle Artikel verfasst, den Sie an Ort und Stelle verwenden sollten.

Sie können es hier lesen: https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email

0
Lirianna