Optimieren (Reduzieren) von Anforderungen an Webschriftarten

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?

optimization fonts

— adam-asdf
quelle

Antworten:

Die Verwendung von nicht standardmäßigen Web-Schriftarten hat erhebliche Auswirkungen auf die Ladezeiten von Seiten im Vergleich zur Verwendung von standardmäßigen web-sicheren Systemschriftarten. Dies ist unabhängig davon der Fall, ob Sie JavaScript oder @ font-face verwenden .

Man sollte immer sorgfältig analysieren, ob nicht standardmäßige Web-Schriftarten verwendet werden sollten oder nicht.

Einige Fragen, die Sie sich stellen sollten, wenn Sie nicht standardmäßige Web-Schriftarten verwenden möchten:

Verwenden Sie sie nur, um zu zeigen, dass Sie es können und wissen, wie es geht?
Hat es einen Zweck, ein besseres Design auszuführen und eine bessere Benutzererfahrung zu bieten?
Ist die Methode zur Implementierung der Schriftarten browserübergreifend kompatibel?
Könnte ein Bild ausreichen, insbesondere wenn es nur wenige Wörter auf einer einzelnen Seite oder nur wenige Seiten enthält?
Unterscheidet sich die Schriftart genug von den web-sicheren Schriftarten , damit sich die Verwendung lohnt?
Wenn die Schriftart als Textkörper verwendet wird, ist sie leicht lesbar oder ist die Schriftart für Überschriften konzipiert?

Stellen Sie sicher, dass Sie zumindest die Grundlagen der Typografie und deren Auswirkungen auf Ihr Design verstehen , und nutzen Sie dies zu Ihrem Vorteil.

— Tacotuesday
quelle

Vielen Dank für die ausführliche Antwort, aber ich gebe ein wenig Frustration über die bisherigen Antworten zu. Mir ist klar, dass es die Ladezeit beeinflusst. Ich kenne mich mit Typografie und web-sicheren Schriftarten aus. Mir ist klar, dass ich ein Bild (oder Bild-Sprites) und Alternativtext verwenden könnte. Dies sind jedoch die letzten Mittel für mich. Ich könnte einen sehr sicheren Schriftstapel verwenden, aber das macht den Zweck von Web-Schriftarten zunichte (und selbst Ersatzschriftarten erfordern eine HTTP-Verbindung). Dann beschäftigen Sie sich mit SEO, Eingabehilfen bei der Anpassung der Schriftgröße, Übersetzungen, Einstellungen für Sehbehinderte usw. Wenn es vernünftig ist , bevorzuge ich die Optimierung meiner Web-Schriftarten.

— Adam-Asdf

Wenn Sie den ersten Artikel gelesen hätten, auf den ich verlinkt habe, hätten Sie Informationen darüber gefunden, wie Sie die Ladezeiten von Seiten bei Verwendung nicht standardmäßiger Web-Schriftarten verbessern können.

— Tacotuesday

Entschuldigung, wurde von der Anzahl der Links überwältigt, das mache ich jetzt.

— Adam-Asdf

Sie hatten Recht, entschuldigen Sie meine Ungeduld (es ist tatsächlich der zweite Link, den er gibt). Details Self-Hosting, TypeKit, Google, Font-Squirrel (irgendwie habe ich es versäumt, die erweiterte Option des @ Font-Face-Generators auszuprobieren) und sogar eine Analyse verschiedener Methoden in verschiedenen Browsern. Für diejenigen, die auf der Straße darauf stoßen, hat es alle meine Fragen beantwortet.

— Adam-Asdf

Vielen Dank, dass Sie mich wissen lassen, dass es der zweite Link war. Ich habe sie in der Post verwechselt. Es ist jetzt behoben, also ist es der erste Link. Sie können sich auch Cufon und sIFR ansehen, falls Sie dies noch nicht getan haben. Außerdem war ein Großteil meiner Antwort für zukünftige Leser gedacht, damit sie ein wenig nachdenken, bevor sie der Menge in Bezug auf die Verwendung von Web-Schriftarten folgen.

— Tacotuesday

Die anderen 4 werden nur für ein oder zwei Wörter verwendet

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 .

— Su '
quelle

Das war mir eingefallen, ich habe nur das Gefühl, wenn ich sage, ich kann mit CSS3 ein paar Web-Schriftarten codieren, und ein responsives Design über Medienabfragen ist wahrscheinlich klug.

— Adam-Asdf

Mir ist aufgefallen, dass Sie in dieser Community viel Respekt haben (und anscheinend praktische Erfahrung haben). Was schaue ich mir gerade an? Ich weiß, dass http (s) -Anfragen jeweils Zeit in Anspruch nehmen, aber geben Sie mir etwas, um eine fundierte Entscheidung zu treffen ... sprechen wir 2 Sekunden oder 2 Mikrosekunden? Ich bin praktisch, aber mit einem Hintergrund im Design bin ich ästhetisch orientiert. Geben Sie mir bitte eine Möglichkeit, eine fundierte Entscheidung zu treffen.

— Adam-Asdf

@Su 'ist völlig richtig. Jede Site unterscheidet sich in Bezug auf HTTPRequests. Dies hängt wirklich von der Route zwischen dem Client und Ihrem Server ab. Jemand, der eine Einwahl (noch) oder eine Satellitenverbindung verwendet, hat längere Ladezeiten als jemand mit DSL oder T1. Gute Ästhetik ist unglaublich wichtig, aber gute Struktur und Optimierung sind genauso wichtig. Das Minimieren des Zeitraums für Ladezeiten ist eine gängige Praxis, wodurch die Anzahl der HTTPRequests für Ihre Site begrenzt wird. Wenn Sie ein Bild der Wörter erstellen, wird die Ladezeit verkürzt und Ihre Benutzer wissen nichts. Schauen Sie sich auch CSS Sprites an.

— Christopher

@Christopher Ich bin froh, dass Sie Sprites erwähnt haben. Ich denke, Sie könnten sagen, ich suche nach einer Möglichkeit, eine benutzerdefinierte, lokal verfügbare Version von Sprites in Webfonts zu erstellen.

— Adam-Asdf

@ user1332729 Machen Sie es einfach wie von Su 'vorgeschlagen (Erstellen Sie Bilder der Wörter) und wenden Sie die CSS Sprite-Prinzipien darauf an. Bang, es gibt so viel Optimiertes wie möglich, ohne die Bildformate durchzugehen. Was meinst du lokal verfügbar? Für Sie oder Ihren Kunden?

— Christopher

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 .woffund die .ttfSchriftart.

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 CSSDatei mit Verweisen auf alle Schriftformate gemäß der gehärteten kugelsicheren Schriftgesichtssyntax .

Ich ging zwischen der Base64-Codierung der .woffSchriftart und dem Einfügen der restlichen Schriftartdeklarationen in die Primärdatei CSSoder nur der Base64-Codierung .woffin der Primärdatei CSSund dem Einschließen der anderen Formate in eine CSSDatei, über die ich asynchron geladen habe, hin und her Modernizr.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 CSSasynchronen 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 .svgSchriftarten 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.

— adam-asdf
quelle