Zusammenfassung der Schlüsselpunkte

• Die Verwendung eines Schriftartloaders kann die Leistung der Webseiten erheblich verbessern, da das Ladezeitpunkt und die Wege von Webseiten -Schriftarten steuern und damit die Ladezeit des Seitens verkürzt und "nicht styledes Text flackern" (FOUT) vermieden werden.
• WebFontloader Die JavaScript -Bibliothek ist ein sehr nützliches Tool, mit dem Schriftarten aus verschiedenen Quellen im Hintergrund geladen werden k?nnen, nachdem die Seite geladen wurde, und die Anpassung des Ladevorgangs mithilfe von CSS- und JavaScript -Rückruffunktionen erm?glicht.
• Die Schriftnutzung und die Benutzererfahrung müssen ausgeglichen sein. Daher kann die Verwendung von Schriftladern und die Implementierung alternativer Schriftarten dazu beitragen, eine reibungslose und schnelle Benutzererfahrung aufrechtzuerhalten.

Besonderer Dank geht an Jason Pondon für die Inspiration, die zum Schreiben dieses Artikels führte. Ansonsten k?nnte ich nie darüber nachdenken! Das letzte Mal, als Sie Arial, Times New Roman, Helvetica oder… (Chilling) auf einer Webseite verwendet haben… Wann war Comic Sans? Web -Schriftarten erscheinen zu sp?t, aber sobald sie erscheinen, schauen wir nie zurück. Schriftarten machen Spa?, (normalerweise) kostenlos und einfach zu implementieren:

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Sie k?nnen dann die Schriftart in Ihrer Seite verwenden, zum Beispiel:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

Schriftarten funktionieren auf mobilen Ger?ten ordnungsgem??, sodass Benutzer eine gute Erfahrung in Ihrem reaktionsschnellen Webdesign erhalten. Oder ist es wirklich der Fall?

Nach dem Bild sind Schriftarten normalerweise die gr??te Ressource in der Webseite. Die Ubuntu -Schriftart oben fügt der Seite fast 250 KB hinzu, was auf langsameren Verbindungen des mobilen Netzwerks erkennbar ist. Chrome, dh, Safari und Opera lassen den leeren Platz, wenn die Schriftart geladen wird, sodass die Seite nicht verwendet werden kann. Firefox und ?ltere Versionen des Opera -Display -Textes in alternativen Schriftarten und Schalter - dies wird als nicht styledes Textblitz (FOUT) bezeichnet. Keine dieser Situationen ist ideal. Wir machen uns selten Sorgen über die Gewichtung von Schriftarten und machen Ausreden wie "Dies ist nur ein Problem mit der ersten Seite" oder "Viele Benutzer haben Gespenstgeforten". Wir k?nnen weniger verwendet werden. Nur wenige Menschen wagen es, offensichtliche L?sungen mit standardm??igen Betriebssystemschriften zu übernehmen - unsere Kunden und Designer werden uns niemals verzeihen.

JavaScript WebFontloader

Zum Glück gibt es eine andere Option: WebFontloader. Diese JavaScript -Bibliothek kann nach dem Laden der Seite Schriftarten von Google, Typkit, Fonts.com, Fontdeck oder Ihrem eigenen Server im Hintergrund laden. Die Bibliothek selbst fügt der Seite zus?tzliche 17 KB hinzu, wird jedoch auch als Hintergrundprozess heruntergeladen. Um die oben festgelegte Ubuntu -Schriftart zu laden

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

Daher k?nnen wir bestimmen, ob einige oder alle Schriftarten basierend auf der Ger?t und der Bandbreitenkapazit?t geladen werden. Im Idealfall k?nnen wir die Netzwerkinformations -API verwenden, aber der Browserunterstützung ist weiterhin begrenzt. Beachten Sie alternativ die Timeout -Einstellung in WebFontConfig.

CSS -Rückruffunktion

WebFontloader wendet den Klassennamen w?hrend des Betriebs auf das HTML -Element an:

• .wf-loading - Alle Schriftarten sind angefordert
• .wf-active - Alle Schriftarten sind verfügbar
• .wf-inactive - kann keine Schriftarten
laden

Klassenname wird auch auf jede Schriftart angewendet:

• .wf-<familyname>-<fvd>-loading</fvd></familyname> - einzelne Schriftart
angefordert
• .wf-<familyname>-<fvd>-active</fvd></familyname> - verfügbar in einer einzelnen Schrift
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> - Eine einzelne Schrift kann
nicht laden

wobei <familyname></familyname> eine gereinigte Version des Schriftnamens ist, und <fvd></fvd> ist eine Variantenbeschreibung, wie z. B. I4 Kursivschrift von 400 Dicke darstellt. Auf diese Weise k?nnen wir die Schriftarten nach dem Download der Schriftart wechseln - genauso wie Firefox beispielsweise:

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

JavaScript -Rückruffunktion

?hnliche JavaScript -Rückruffunktionen k?nnen in WebFontConfig definiert werden, obwohl dies selten nützlich ist, wie z. B.

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

Weitere Informationen finden Sie in der WebFontloader -Dokumentation.

minimieren Sie Fout

Wenn sich Ihre alternative Schriftart in Bezug auf Stil, Dicke oder Abstand stark von Ihrer Webschrift unterscheidet, kann das Blinken des nicht styledierten Textes hart sein. Mit nur einem kleinen Experiment k?nnen Sie jedoch die alternative Schriftart, die Dicke, die Linienh?he und die R?nder einstellen, um sicherzustellen, dass die Seitenelemente beim Laden der Web -Schriftarten ungef?hr gleich bleiben ... siehe Craig Buckler auf CodePen (@craigbuckler) Artikel. " So verwenden Sie Schriftlader ".

Klicken Sie auf die Schaltfl?che "Schriftart Schalten", um den Schriftschalt -Effekt der Schriftart anzuzeigen. Diese ?nderung ist nicht ganz unerwünscht, aber es ist wichtig, dass Benutzer, wenn sie mit dem Lesen beginnen, nicht ihren Platz verlieren. Sie k?nnen jeder Seite eine Schaltfl?che "Switch -Schrift" hinzufügen, um den entsprechenden alternativen Stil zu bewerten:

/* 默認操作系統(tǒng)字體 */
body {
    font-family: arial, sans-serif;
}

/* 字體現(xiàn)在已加載 */
.wf-active body {
    font-family: 'Ubuntu';
}

(Folgendes ist der FAQ H?ufig gestellte Fragen zur Verwendung von Schriftart Loader zur Verbesserung der Webseitenleistung

Was ist ein Schriftlader? Warum ist es wichtig für die Seitenleistung?

Schriftart geloder ist ein Tool, mit dem Sie steuern k?nnen, wie Web -Schriftarten auf Ihrer Website geladen werden. Es ist wichtig für die Seitenleistung, da es dazu beitragen kann, die Ladezeit der Website zu verkürzen. Wenn die Webseite geladen wird, muss der Browser alle erforderlichen Ressourcen, einschlie?lich Schriftarten, herunterladen. Wenn die Schriftart gro? oder gro? ist, verlangsamt dies die Ladezeit der Seite. Mit Schriftladern k?nnen Sie steuern, wie und wie diese Schriftarten geladen werden, was Ihre Seitenleistung erheblich verbessern kann.

Wie verbessert der Schriftlader die Seitenleistung?

Schriftlast verbessert die Seitenleistung, indem Sie das Laden von Webschriften steuern. Sie k?nnen asynchron Schriftarten laden, was bedeutet, dass sie das Rendern für den Rest der Seite nicht blockieren. Dies kann die Zeit, die die Seite ben?tigt, um interaktiv zu werden. Darüber hinaus kann der Schriftlader dazu beitragen, das Ph?nomen des "nicht styierten Textes flackern" (FOut) zu verhindern, wobei der Browser alternative Schriftarten anzeigt, w?hrend die Web -Schriftart noch geladen wird.

Was sind die h?ufig verwendeten Schriftlader?

Es stehen mehrere h?ufig verwendete Schriftlader zur Verfügung, darunter den WebFont Loader von Google und den WebFont Loader von Typekit. Beide Tools bieten mehrere Optionen, um zu steuern, wie Web -Schriftarten geladen werden. Es gibt auch einige WordPress -Plugins (z. B. Entwicklungsgoogle -Schriftarten), die das Laden von Schriftarten auf Ihrer Website problemlos implementieren k?nnen.

So implementieren Sie einen Schriftartader auf meiner Website?

Implementieren eines Schriftartaders auf Ihrer Website müssen normalerweise ein Skript zu Ihrem HTML hinzugefügt werden. In diesem Skript l?dt der Schriftart geladen und Sie k?nnen dann die API des Schriftladers verwenden, um zu steuern, wie Web -Schriftarten geladen werden. Der genaue Vorgang kann je nach Verwendung des von Ihnen verwendeten Schriftladers variieren. Es ist daher besser, auf die Dokumentation für bestimmte Anweisungen zu verweisen.

Kann ich den Schriftart geladen mit einer Webschrift verwenden?

Die meisten Schriftlader sind mit jeder Webschrift kompatibel, solange die Schriftart so gehostet wird, dass der Schriftart geladen wird. Dies beinhaltet selbst gehostete Schriftarten und Schriftarten, die von Schriftarten wie Google-Schriftarten oder Typkit gehostet werden.

beeinflusst die Verwendung eines Schriftladers das Erscheinungsbild meiner Schriftarten?

Die Verwendung eines Schriftladers kann das Erscheinungsbild Ihrer Schriftarten beeinflussen, da dies dazu beitragen kann, Fout zu verhindern. Es sollte jedoch nicht das tats?chliche Design oder Stil der Schriftart ?ndern. Wenn Sie ?nderungen im Erscheinen der Schriftart nach der Implementierung des Schriftladers feststellen, kann dies auf Konfigurationsprobleme zurückzuführen sein.

Was ist "nicht styled text blinking" (fout)? Wie verhindert ein Schriftlader dies?

fout ist ein Ph?nomen, bei dem der Browser alternative Schriftarten anzeigt, wenn die Webschriftart noch geladen wird. Dies kann dazu führen, dass ein kurzes Text flackern wird, wobei die Schriftart von der endgültigen Schriftart unterscheidet, was den Benutzer unwohl fühlen kann. Schriftlader verhindern Fout, indem Sie steuern k?nnen, wenn Sie Web -Schriftarten auf Text anwenden. Sie k?nnen beispielsweise den Text ausblenden, bis die Web -Schriftart geladen ist, oder Sie k?nnen den Text in der alternativen Schriftart anzeigen und nach dem Laden der Webschrift ersetzen.

Kann Schriftartader die SEO meiner Website verbessern?

Ja, Schriftlader k?nnen die SEO Ihrer Website verbessern, indem sie die Ladenzeit verkürzen. Die Ladezeit von Seite ist ein Faktor, den Suchmaschinen beim Ranking von Websites berücksichtigen, sodass Sie alles tun k?nnen, um sie zu reduzieren, was Ihre SEO verbessern kann.

Gibt es Nachteile bei der Verwendung eines Schriftladers?

Ein potenzieller Nachteil der Verwendung eines Schriftartaders ist, dass er die Komplexit?t des Website -Codes erh?hen kann. Die Vorteile einer verbesserten Seitenleistung und Benutzererfahrung überwiegen jedoch h?ufig diesen Nachteil. Darüber hinaus haben viele Schriftlader eine gute Dokumentation und Unterstützung, was sie relativ einfach zu implementieren.

Wie kann ich feststellen, ob der Schriftart geladen meine Seitenleistung verbessert?

Sie k?nnen verschiedene Tools verwenden, um Ihre Seitenleistung vor und nach der Implementierung des Schriftartsladers zu messen. Diese Tools k?nnen Metriken wie die Ladezeit von Seiten, die erste Zeichnenzeit und die interaktive Zeit bereitstellen, mit denen Sie die Auswirkungen des Schriftartaders quantifizieren k?nnen. Einige h?ufig verwendete Tools zur Leistungsmessung umfassen den Leuchtturm von Google und WebPagetest.

Das obige ist der detaillierte Inhalt vonSo verbessern Sie die Seitenleistung mit einem Schriftart geladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!