Vermeiden Sie verzögerte laden von font-face

Ist es, die tatsächliche Art und Weise zu vermeiden, die das verzögerte laden von font-face?

Es ist ein blogpost von Paul Irish zu diesem FOUT (flash of unstyled text). Seine aus dem Jahr 2009.

Gibt es keine Fortschritte in den letzten 3 Jahren?

  • Wenn Sie Referenz-Informationen, die Sie gestoßen sind, es ist generell eine gute Idee, um tatsächlich verlinkt sind.
  • Dies ist ein neuer Beitrag zu diesem Thema, die ich als hilfreich gefunden: michael.stapelberg.de/Artikel/font-loading
InformationsquelleAutor Denny Mueller | 2012-07-20
  1. 8

    Du ziehst zwei getrennte Fragen.

    Einer Verzögerung bei der das herunterladen der aktuellen schriftart-Dateien ist im wesentlichen unvermeidbar, aber Sie können helfen indem Sie nicht alles, was Sie nicht wirklich benötigen, um minimieren Sie die Datei-Größe insgesamt. Je nachdem, welche Leistung/Methode, die Sie verwenden, könnte dies bedeuten, die Verringerung der Zeichensätze(/Sprachen), die Sie beinhalten, sowie GEWICHTE und Stilen.

    Als der flash unstyled text, das ist semi-unvermeidbar, teilweise wegen der Download Zeit-Ausgabe vor. Aber einmal haben Sie reduziert, so viel wie Sie können, sollten Sie implementieren eine font loader, um eine bessere Kontrolle über diesen Teil. Hier ist TypeKit ist (open-Source) Implementierung, und ein kurze erläuternde blog-post. Das Beispiel unten richtet sich speziell an FOUT; Sie können ziemlich viel, legen Sie es einfach in Ihren eigenen code.

    Hier einige Informationen von FontDeck auf die Verwendung von Google-loader mit Ihrem service, die auch dazu führen, dass die Verwendung desselben für die Google-WebFonts-service.

    Jede andere Dienstleistung, die Sie haben zu tun beginnen Ihre eigene Forschung, aber das sind die Allgemeinen Konzepte. Mit diesen tools, können Sie mit ein wenig scripting und CSS-Regeln zu verstecken, den betroffenen text, bis Sie die Schriftarten, die bereit sind für die Präsentation, unter anderem verwendet. Es ist nicht vollständig Ahnung, aber zumindest wird verhindert, dass die FOUT. Einmal Vergangenheit, die erste Zeit, den cache des Browsers übernehmen sollte und machen es weitgehend irrelevant.

    • try{Typekit.load();}catch(e){} von TypeKit ist die Umsetzung ziemlich viel sagt alles - das Dokument wird nicht Rendern, bis das Skript ausgeführt wird, so, wenn Sie nichts dagegen haben, dass die Benutzer warten noch eine extra portion Zeit (hoffentlich werden in Millisekunden gemessen) dann funktioniert das... wenn Sie kümmern sich darum, Ihre Seite so schnell wie möglich, das funktioniert nicht. (... und wenn die Benutzer nicht bleiben, um lange genug, um Ihre Website zu sehen beenden laden, spielt es eigentlich keine Rolle, was Ihre Website sieht aus wie 🙂
    • Es ist erwähnenswert, Daten-uri-eingebettete Schriftarten als option. Vermeidet überflüssigen http-Anfragen.
    InformationsquelleAutor Su'
  2. 0

    A) Cache-Schriftarten durch die Einstellung der Cache-Control-und Content-Type richtig:

    Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)

    B) Vermeiden Sie https für die Vary-Header. Nur setzen Accet-Codierung.
    Die Variieren:https bricht IE schriftart laden.

    Vary:Accept-Encoding

    https://github.com/typekit/webfontloader

    C) A und B sollte perfekt funktionieren, nachdem die erste Anforderung, wenn der browser bereits geladen hat, die Schrift. Wenn dies nicht ausreicht, versuchen Sie Web Font Loader.

    InformationsquelleAutor Matthias M
Schreibe einen Kommentar