Meine Homepage verwendet derzeit 5 Web-Schriftarten - ich möchte, dass es 6 ist, da Helvetica Neue nur wenig unterstützt wird. Eine der Schriftarten ist "FontAwesome" -Symbole, die anderen 4 werden nur für ein oder zwei Wörter verwendet (dh ich habe eine Überschrift mit der Aufschrift "Optimierung" in Buchstaben, die wie ein alter Computer aussehen).
2 dieser Schriftarten sind über Google verfügbar und ich fordere nur die benötigten Buchstaben an (und das funktioniert hervorragend). Die anderen beiden stammen jedoch von openfontlibrary.org und sind nur in einem einzigen Format verfügbar. Das ist keine große Sache (ich brauche sie sowieso sicher, damit lokale Kopien besser sind), ein Quickie mit dem Fontsquirrel.com @ font-face-Generator und ich habe sie in mehreren Formaten und das CSS zum Booten.
Und dann teste ich die Ladezeit meiner Seite ... ugh. Ich gehe davon aus, dass es mir möglich wäre, meine lokalen Kopien zu unterteilen. Hat jemand Erfahrung in diesem Bereich?
quelle
Ist das eine wörtliche Aussage?
Wenn ja, warum machen Sie sich die Mühe, diese Schriftarten überhaupt einzubetten, Teilmengen oder nicht? Sie sollten in diesem Fall nicht einmal optimieren, sondern nur entfernen . Erstellen Sie Bilder des benötigten Textes und verwenden Sie Ihre bevorzugte Textersetzungstechnik. Sie fügen HTTP-Anforderungen hinzu und laden Ihre Site für ein paar Worte herunter .
quelle
Um dies zu verfolgen, habe ich die erweiterten Optionen des @ font-face-Generators verwendet, um meine Schriftarten zu unterteilen, sodass ich nur die benötigten Zeichen geladen habe.
Eine der Optionen war die Codierung der Schriftarten durch Base64 (wodurch ich sie in meine CSS-Datei einbetten konnte). Wenn Speicher bereitgestellt wird, codiert Base64 die
.woff
und die.ttf
Schriftart.Obwohl ich so viele Benutzer wie möglich von so vielen Browsern unterstützen möchte, habe ich beschlossen, dass es sich nicht lohnt, die Benutzer moderner Browser mit zusätzlichen, wahrscheinlich redundanten Daten zu verlangsamen. Deshalb habe ich Modernizr (das yep / nope.js verwendet) verwendet Laden Sie asynchron eine separate
CSS
Datei mit Verweisen auf alle Schriftformate gemäß der gehärteten kugelsicheren Schriftgesichtssyntax .Ich ging zwischen der Base64-Codierung der
.woff
Schriftart und dem Einfügen der restlichen Schriftartdeklarationen in die PrimärdateiCSS
oder nur der Base64-Codierung.woff
in der PrimärdateiCSS
und dem Einschließen der anderen Formate in eineCSS
Datei, über die ich asynchron geladen habe, hin und herModernizr.load
.Ich bevorzuge schnelle Ladezeiten gegenüber der Ästhetik, daher war FOUC kein großes Problem, aber ich werde feststellen, dass die meisten Browser beim Laden (was nach dem Laden der Base64-codierten Schriftarten im
CSS
asynchronen Zustand) auf den Schriftarten "blinkten" .Positiv zu vermerken ist, dass nach dem Laden und Speichern der Schriftarten im Cache (lange abgelaufene Header auf dem Server) das "Blinken" beseitigt wurde und ich erweiterte Sätze der Schriftarten laden konnte, sodass Benutzer, die andere Sprachen sprachen (und die verwendeten) Das enthaltene Google Übersetzungs-Widget würde weiterhin stilisierten Text anzeigen.
Da dies meine eigene Site war, konnte ich experimentieren, aber ich habe es hauptsächlich getan, um "anzugeben". Ich bin konservativer mit Client-Sites.
Eine andere Technik, die ich implementiert habe, bestand darin, alle
.svg
Schriftarten in eine einzige Datei zu packen und jede mit ihrer eigenen ID zu identifizieren, anstatt sie in einer separaten Datei zu haben, wie es der @ font-face-Generator erzeugt.quelle