Seit den Problemen, die durch die Verwendung von Cufon verursacht wurden, habe ich mich von der Verwendung externer Schriftartressourcen abgewandt. In letzter Zeit habe ich nach alternativen Methoden zum Laden von Schriftarten gesucht, um festzustellen , ob es einen besseren Weg gibt. Bessere Methoden können einfach aus heiterem Himmel erscheinen.
Es gibt viele neue Methoden und Variationen für jede Methode, wie es scheint; Soll ich typekit verwenden ? oder Google Webfonts (mit JS oder CSS)? sollte ich weiterhin lokal geladene Schriftarten verwenden (z. B. die von fontsquirrel.com generierte Methode)?
Ich werde im Folgenden mit einigen Tests die Methoden auflisten, die am besten ankommen, aber lohnt es sich wirklich, zu einem Webfont zu wechseln? Es scheint, als würde es eine höhere Ressourcenlast (http-Anforderungen) und weniger Dateiformattypen (weniger Kompatibilität) usw. aufweisen. Es sieht jedoch so aus, als würden Dateien in den meisten Fällen asynchron und effizient geladen.
- Ist es nur eine Frage der Situation und der Notwendigkeit? Wenn ja, was sind sie?
- Gibt es drastische Unterschiede zwischen diesen Methoden?
- Gibt es eine bessere Methode, die ich nicht aufgelistet habe?
- Was sind die Vor- und Nachteile für die Leistung? Aussehen? Abhängigkeiten? Kompatibilitäten?
Ich bin hier wirklich auf der Suche nach Best Practices. Leistung ist eine große Sache, aber auch Skalierbarkeit und Benutzerfreundlichkeit. Ganz zu schweigen von Aussehen und Gefühl.
Google CSS
- verwendet nur externes Stylesheet
- verwendet nur den kleinsten kompatiblen Dateityp
- Sie können den Inhalt von styleshee ( ) verwenden
@importoder verwenden und ihn direkt in Ihr eigenes Stylesheet einfügen.<link>@font-face
Testergebnisse
78ms load of html 36ms load of css
Google JS-Methode
- wird
webfont.jszum Laden von Styleshet verwendet - verwendet nur den kleinsten kompatiblen Dateityp
- Hängt das
:rootElement an die Klasse an - fügt dem Kopf ein Skript hinzu.
Testergebnisse
171ms load of html 176ms load of js 32ms load of css
Typekit-Methode
- Hängt das
:rootElement an die Klasse an. - kann
*.jsSnippet oder extern geladene Datei*.jsverwenden - verwendet
data:font/opentypeanstelle von Schriftdatei. - fügt dem Kopf ein Skript hinzu
- Fügt dem Kopf eingebettetes CSS hinzu
Fügt dem Kopf ein externes Stylesheet hinzu
Sie können auf typekit.com ganz einfach Schriftarten und gezielte Selektoren hinzufügen / entfernen / anpassen
Testergebnisse
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… & Die Font Squirrel Methode
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… Oder mit Daten: Schriftartmethode…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}quelle
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>GeorgianWebfonts. Ich verwende die Font-Squirrel-Methode und würde auch gerne eine gute Antwort auf diese Frage sehen.@font-faceErklärungen deklariert . Vielleicht finden Sie nützliche Informationen. paulirish.com/2009/bulletproof-font-face-implementation-syntaxAntworten:
Zunächst werde ich etwas über das Angebot von Google klären. Es wird tatsächlich das kleinste Format geladen, das Ihr Browser verarbeiten kann. WOFF bietet kleine Dateigrößen, und Ihr Browser unterstützt diese, sodass Sie sie sehen können. WOFF wird auch ziemlich häufig unterstützt. In Opera erhalten Sie jedoch wahrscheinlich die TrueType-Version der Schriftart.
Ich glaube, die Logik der Dateigröße ist auch der Grund, warum Font Squirrel sie in dieser Reihenfolge versucht. Aber das sind hauptsächlich Spekulationen meinerseits.
Wenn Sie in einer Umgebung arbeiten, in der jede Anforderung und jedes Byte zählt, müssen Sie einige Profile erstellen, um herauszufinden, welche für Ihren Anwendungsfall am besten geeignet ist. Werden die Leute nur eine Seite sehen und nie wieder besuchen? In diesem Fall sind Caching-Regeln nicht so wichtig. Wenn sie surfen oder zurückkehren, hat Google möglicherweise bessere Caching-Regeln als Ihr Server. Ist die Latenz das größere Problem oder die Bandbreite? Bei Latenz sollten weniger Anforderungen angestrebt werden. Hosten Sie sie daher lokal und kombinieren Sie die Dateien so weit wie möglich. Wenn Bandbreite vorhanden ist, wählen Sie die Option aus, die den kleinsten Code und das kleinste Schriftformat ergibt.
Nun zu den Überlegungen zu CSS und JS. Schauen wir uns das folgende Stück HTML an:
In vielen Fällen
script1,style1undstyle2blockiert wäre. Dies bedeutet, dass der Browser das Dokument erst dann weiter anzeigen kann, wenn diese Ressource geladen wurde (obwohl moderne Browser dies ein wenig verfälschen). Was eigentlich eine gute Sache sein kann, besonders bei Stylesheets. Es verhindert ein Aufblitzen von nicht gestylten Inhalten und verhindert auch die riesige Verschiebung, die beim Anwenden der Stile auftreten würde (und das Verschieben von Inhalten ist als Benutzer wirklich ärgerlich).Auf der anderen Seite
script2würde nicht blockieren. Es kann später geladen werden und der Browser kann mit dem Parsen und Anzeigen des restlichen Dokuments fortfahren. Das kann also auch von Vorteil sein.Wenn ich speziell über Schriftarten (und insbesondere über das Angebot von Google) spreche, würde ich mich wahrscheinlich an eine CSS-Methode halten (ich mag es,
@importweil sie weiterhin mit dem Stylesheet gestylt wird, aber das könnte nur ich sein). Die vom Skript geladene JS-Datei ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) ist größer als die@font-faceDeklaration und sieht einfach nach viel mehr Arbeit aus. Und ich glaube nicht, dass das Laden der eigentlichen Schriftart (WOFF oder TTF) blockiert, daher sollte dies die Dinge nicht zu sehr verzögern. Ich persönlich bin kein großer Fan von CDNs, aber Tatsache ist, dass sie WIRKLICH schnell sind. Die Server von Google werden die meisten gemeinsam genutzten Hosting-Pläne durch einen Erdrutsch übertreffen. Da ihre Schriftarten so beliebt sind, werden sie möglicherweise bereits zwischengespeichert.Und das ist alles was ich habe.
Ich habe keine Erfahrung mit Typekit, deshalb habe ich es aus meiner Theorie herausgelassen. Wenn es Ungenauigkeiten gibt und Verallgemeinerungen zwischen Browsern aus Gründen der Argumentation nicht berücksichtigt werden, weisen Sie darauf hin.
quelle
Ich denke, Sie haben die Ladezeiten in Ihrer Frage sehr gut angesprochen. Aus meiner Sicht gibt es einige Quellen, die der Liste hinzugefügt werden sollten, und einige andere Überlegungen, die untersucht werden sollten, um einen vollständigen Überblick über die Optionen zu erhalten.
Einige andere seriöse Schriftquellen
cloud.typography
http://www.typography.com/cloud/
Soweit ich weiß, sind die Schriftarten als Daten in eine CSS-Datei eingebettet:
Hier sind meine Spezifikationen:
Hier ist ihre sehr allgemeine Beschreibung ihrer Bereitstellung .
Fonts.com
Ich habe diesen Dienst nicht genutzt, aber sie sind ein sehr etablierter Anbieter von Schriftarten, und die Informationen, die sie auf ihrer Website aufgelistet haben, sind ziemlich beeindruckend. Ich habe keine genauen Angaben zu den genauen Methoden, aber ich weiß, dass sie Folgendes haben:
FontSpring
Verbunden mit FontSquirrel. Schriftarten können hier zum Festpreis erworben werden. Die Schriftdateien und das zugehörige CSS werden bereitgestellt und auf Ihrem eigenen Server bereitgestellt, ähnlich wie bei FontSquirrel.
Erweiterte Spezifikationen
Im Folgenden finden Sie einige Vergleiche zu den allgemeinen Vor- und Nachteilen der einzelnen Schriftarten:
Schriftgröße der Schriftbibliothek
Preisgestaltung
Schriftqualität
Die Qualität von Web-Schriftarten kann sehr unterschiedlich sein. Dies kann Dinge wie die Buchstabenformen selbst oder den Abstand oder die Größe des Zeichensatzes umfassen. All dies bestimmt den Gesamteindruck der Qualität, den eine Schriftart vermittelt. Die kostenlosen Optionen bieten zwar einige gute Optionen, aber auch einige Schriftarten, die nicht so hochwertig sind. Sie sollten daher sorgfältig aus diesen Quellen auswählen.
Schriftqualität II: Typografie
Es gibt viele Verfeinerungen in der Desktop-Typografie, die in Web-Schriftarten nur schwer zu bekommen waren. Einige dieser Dienste bieten Möglichkeiten zur Bereitstellung dieser.
Browser-Unterstützung
Dies hängt hauptsächlich mit den Schriftformaten zusammen, die von den einzelnen Diensten unterstützt werden. Die wichtigsten sind:
Weitere Informationen finden Sie unter Die @ Font-Face-Regel und nützliche Web-Font-Tricks
Alle diese Dienste unterstützen die wichtigsten Schriftformate. Bei selbst gehosteten Schriftarten sollten Sie abgedeckt sein, solange Sie die richtige Syntax verwenden. Hier ist ein 2011-Update der kugelsicheren Syntax von FontSpring :
Leistung I: Downloads
Soweit ich weiß, können Browser mithilfe der oben genannten Syntax das für sie geeignete Format abrufen, sodass keine Downloads für nicht funktionierende Schriftformate verschwendet werden.
Die kostenpflichtigen Dienste wie Fonts.com, Typekit oder Typography.com verwenden Methoden, um das richtige Format zu ermitteln und dann das richtige Schriftformat bereitzustellen, häufig als base64-Daten in einer CSS-Datei.
Soweit ich sehen kann, sind die Unterschiede in den oben aufgeführten Methoden für Hochgeschwindigkeits-Internetnutzer ziemlich vernachlässigbar (scheint <200 ms Unterschied zu sein), könnten jedoch für Geräte in langsameren Netzwerken in Betracht gezogen werden, insbesondere für nicht zwischengespeicherte Seitentreffer.
Leistung II: Teilmenge
Wenn Sie wissen, dass nur bestimmte Zeichen verwendet werden sollen, können Sie Ihre Schriftart mit einer Teilmenge von Zeichen erstellen und so die Größe des Downloads verringern.
Leistung III: Lieferung
Sprachunterstützung
Testen und Implementierung
quelle
Nun, wie du danach bist
Die Antwort lautet (wie immer im Webdesign): Es kommt darauf an!
Eine Sache ist sicher, dass ich nicht empfehlen würde, den JS-Ansatz zu verwenden (in Ihrem zweiten Beispiel gezeigt).
Persönlich mag ich es nicht, Präsentationssachen und CSS-Stile in Abhängigkeit von Javascript zu erstellen, obwohl die überwiegende Mehrheit der Benutzer dies aktiviert hat. Es geht darum, die Dinge nicht durcheinander zu bringen.
Und wie Sie in Ihrem Beispiel sehen können, gibt es eine Art FOUC (Flas von nicht gestylten Inhalten), da die Seite bereits vom Browser gerendert wird, bevor die Schriftart verfügbar ist. Sobald es ist, wird die Seite neu gezeichnet. Und je größer die Site, desto größer die (Leistungs-) Auswirkung!
Daher würde ich niemals eine JS-Lösung zum Einbetten von Schriftarten verwenden.
Schauen wir uns nun die reinen CSS-Methoden an.
Seit einiger Zeit gibt es hier eine Diskussion über "vs. @import". Persönlich bevorzuge ich die Verwendung von @import und verwende immer
<link>nur. Dies ist jedoch hauptsächlich eine Frage der persönlichen Vorlieben. Das einzige, was Sie niemals tun sollten, ist, beide zu mischen!Lokal vs. CDN
Wenn Sie entscheiden, ob Sie Ihre Schriftdateien lokal hosten oder ein CDN verwenden möchten, hängt dies im Wesentlichen von der Anzahl der verschiedenen Schriftarten und den jeweiligen Schriftarten ab, die Sie einbetten möchten.
Warum ist das wichtig oder spielt eine Rolle?
Unter dem Gesichtspunkt der Leistung würde ich empfehlen, die in Ihrem (einen) Stylesheet codierte Schriftart Base64 aufzunehmen. Aber nur das .woff-Format, da es von fast allen modernen Browsern verwendet wird, was für die Mehrheit Ihrer Besucher bedeutet. Für alle anderen Benutzer leben mit der zusätzlichen Anfrage.
Aufgrund des durch die Base64-Codierung verursachten "Overheads" und der Größe einer Schriftartdatei (auch im .woff-Format) sollte diese Technik nur verwendet werden, wenn Sie nicht mehr als 3 oder 4 verschiedene Schriftarten haben. Und stellen Sie immer sicher, dass Ihr Server die gzip'ed-Dateien (CSS) liefert.
Der große Vorteil dabei ist, dass Sie keine zusätzliche Anforderung für die Schriftartdatei haben. Und nach dem Laden der ersten Seite (unabhängig von der Seite Ihrer Site) wird die CSS-Datei zwischengespeichert. Dies ist auch ein Vorteil, wenn Sie den HTML5-Anwendungscache verwenden (was Sie sicherlich tun werden).
Neben der Tatsache, dass ein Autor nicht mehr als maximal 3 oder 4 verschiedene Schriftarten auf seiner Website verwenden sollte, werfen wir einen Blick auf die Methode zur Verwendung von Googles CDN.
Beachten Sie zunächst, dass Sie alle gewünschten Schriftarten
<link>wie folgt in eine einzige einschließen können (und sollten) :Dies führt zu folgender Antwort:
Wie Sie sehen können, gibt es 9 verschiedene Schriftdateien, dh insgesamt 10 Anforderungen (einschließlich der eines der Linkelemente), wenn der Benutzer nicht eine oder mehrere der angeforderten Schriftarten lokal installiert hat. Und diese Anfragen werden bei jeder einzelnen neuen Seitenanfrage an Ihre Site wiederholt (obwohl keine Daten mehr übertragen werden)! Auch die Antwort auf die Anfrage des
<link>wird nie zwischengespeichert.Empfehlung:
Schließlich würde ich wirklich empfehlen, Ihre Schriftdatei (en) im .woff-Format Base64 aufzunehmen, das in Ihrem Stylesheet codiert ist!
In diesem schönen Artikel finden Sie ein Beispiel und eine Beschreibung, wie es geht!
quelle
Ich verwende die Inline-CSS-Methode, da der Overhead der zusätzlichen Anforderung größer ist als die Vergrößerung bei der Bease64-Codierung. Dies wird auch durch die Gizip-Komprimierung der CSS-Dateien durch den Server weiter ausgeglichen.
Eine andere Option ist das asynchrone Laden von Schriftarten. In den meisten Fällen werden die Schriftarten jedoch nach dem Laden angezeigt.
Unabhängig von der Methode können Sie die Größe der Schriftartdatei reduzieren, indem Sie nur die verwendeten Zeichensätze einbeziehen.
quelle
Persönlich verwende ich Google Fonts. Sie haben eine schöne Auswahl und haben kürzlich die Komprimierung der Schriftarten verbessert, indem sie auch auf die Zopfli-Komprimierung umgestellt haben. Google ist bestrebt, das Web schneller zu machen. Ich denke, dass auch in diesem Bereich weitere Optimierungen vorgenommen werden.
Was auch immer Sie als ausgelagerte Schriftzustellung wählen, Sie erhalten immer eine Geschwindigkeitsreduzierung durch die Anforderung, die Schriftarten zu erhalten. Aus Sicht der Geschwindigkeit ist es am besten, die Schriftarten selbst bereitzustellen. Wenn Sie sich nicht für die zusätzlichen Millisekunden interessieren, die zum Laden einer ausgelagerten Lieferung erforderlich sind, sollten Sie dies tun, wenn Sie der Meinung sind, dass die einfache Verwendung die Millisekunden wert ist.
Ich weiß nichts über Typekit und die anderen, aber mit Google Fonts können Sie festlegen, dass bestimmte Teilmengen und Zeichenbereiche bereitgestellt werden, um die Zustellung noch weiter zu beschleunigen.
Auswahl einer Teilmenge:
Auswahl einer Reihe von Zeichen:
Sie können dns-prefetch verwenden , um die Geschwindigkeit mit der Schriftzustellung noch weiter zu verbessern.
Ich denke und hoffe, dass Google alles tun wird, um die Bereitstellung von Schriftarten so weit wie möglich zu beschleunigen. Die Millisekunden, die zum Laden benötigt werden, schaden meiner Website nicht, daher verwende ich sie gerne.
Um es kurz zu machen:
Wenn die Lieferung von Millisekunden-Schriftarten Ihre Website beeinträchtigt, z. B. indem sie länger als die empfohlene Sekunde geladen wird, sollten Sie sie meiner Meinung nach selbst hosten.
quelle
<link rel=dns-prefetch href='//fonts.googleapis.com'>ich verwende es für Analysen, Heat-Mapping und Subdomains, aus irgendeinem Grund wurde es nicht registriert, um für die externen Webfonts ausgeführt zu werden. Und die Ladezeit ist von Schriftart zu Schriftart sehr unterschiedlich. Wenn Sie eine ziemlich beliebte Schriftart verwenden (möglicherweise zwischengespeichert) oder nur eine Handvoll Schriftarten auswählen, ist die Verwendung von Webfonts eine großartige, ziemlich schnelle Schriftquelle. Ich werde hier in Kürze Geschwindigkeitstests veröffentlichen.Am besten importieren Sie die Schriftarten mit Ajax wie folgt:
Ich mache das auf meiner Webseite und erhöhe 9 Punkte im Google Insights-Test.
quelle
asyncAttribut? Es macht das Gleiche.