In einem früheren Beitrag habe ich über Systemschriftarten und ihre Vorteile gegenüber Webschriftarten geschrieben. Ich habe den Ansatz "Systemschriftarten zuerst" unterstützt und argumentiert, dass Webschriftarten (a) im Vergleich zu Systemschriftarten (a) die Leistung negativ beeinflussen können, (b) mehr Daten verwenden und (c) den Stromverbrauch Ihrer Site erhöhen können. Ein Web ohne Web-Schriftarten wäre jedoch viel weniger interessant. Wenn wir Web-Schriftarten verantwortungsbewusster einsetzen, können wir alle Vorteile nutzen und gleichzeitig die Nachteile minimieren.
Im ersten Teil dieses Tutorials werde ich fünf Methoden zur Verbesserung der Leistung von Web-Schriftarten behandeln, von denen ich denke, dass sie mit geringstem Aufwand die größten Auswirkungen haben.
Dank an Zach Leserman, der auf seiner Website ausführlich über Web-Schriftarten geschrieben hat. Alle seine Artikel sind lesenswert, insbesondere die Checkliste zum Laden von Schriftarten und ein umfassender Leitfaden zu Strategien zum Laden von Schriftarten (der wirklich sehr umfassend ist), die sich beide als sehr hilfreich erwiesen haben, als ich diesen Beitrag schrieb.
, , :
(typeface) — , . ( , , ). Helvetica — . .
(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).
1.
Das Web Open Font Format 2.0 (woff2) ist zum Zeitpunkt des Schreibens das kleinste und effizienteste Dateiformat für Web-Schriftarten. Stellen Sie bei der Verwendung von @ font-face at-rules in CSS sicher, dass die woff2-Schrift vor älteren, weniger effizienten Dateiformaten wie ttf gerendert wird. Der Browser verwendet die erste Schriftart in der Liste, die er versteht, auch wenn es sich um eine größere Datei handelt.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); }
Wenn Sie keine IE8-Unterstützung benötigen, benötigen Sie nichts anderes als woff2 und woff. Wenn Sie keine IE11-Unterstützung benötigen, benötigen Sie nur woff2.
Wenn Sie nur eine ttf-Datei haben (z. B. wenn Sie eine Schriftart von Google Fonts heruntergeladen haben), müssen Sie sie mit einem Tool wie Online Font Converter konvertieren . Wenn Sie keine vollständig Open Source-Schriftart verwenden, prüfen Sie zunächst, ob die Lizenz dies zulässt.
2. Verwenden Sie die Deskriptor-Schriftartanzeige
Es gibt zwei Akronyme, die Sie häufig sehen werden, wenn Sie beginnen, Strategien zum Laden von Schriftarten zu verstehen:
- Flash of Invisible Text (foit) ist der Zeitraum, in dem der Text unsichtbar ist, bevor der Browser die Webschriftart lädt.
- Flash of Unstyled Text (fout) ist der Zeitraum, in dem Text mit der Fallback-Schriftart gerendert wird, bevor der Browser die Web-Schriftart lädt.
Keiner der oben genannten Punkte ist perfekt, aber wenn Sie Web-Schriftarten verwenden, tritt ein Teil davon wahrscheinlich beim ersten Besuch Ihrer Website durch einen Benutzer auf (hoffentlich kann der Browser beim Laden der zweiten Seite die Schriftarten von dort aus bereitstellen Zwischenspeicher). Wenn wir unsere at-rule-Schriftart von der vorherigen übernehmen und einen Deskriptor für die Schriftanzeige hinzufügen , können wir dem Browser mitteilen, welche wir bevorzugen.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); font-display: swap; }
Es gibt fünf mögliche Werte für die Anzeige von Schriftarten: Erstens ist Auto das Standardverhalten des Browsers (die meisten Browser bevorzugen Foit). Hier sind noch vier:
Tauschen
swap teilt dem Browser mit, dass der Text mit der Fallback-Schriftart angezeigt werden soll, bis die Web-Schriftart geladen ist (d. h. wir möchten lieber fout verwenden). Unabhängig davon, ob es 5 Sekunden oder 5 Minuten dauert, wird die Schriftart ersetzt, sobald sie heruntergeladen wurde. Dies ist eine gute Grundlage, da Website-Besucher sofort mit dem Lesen Ihrer Inhalte beginnen können. Wählen Sie jedoch eine ähnliche Option (wir: In Teil 2 dieser Artikelserie werden Fallback-Optionen behandelt), um große Layoutfehlausrichtungen zu vermeiden, wenn Schriftarten ändern.
Block
Wenn wir es vorziehen, dass der Browser den Text verbirgt, bis die Webschrift geladen ist (d. H. Wir würden foit bevorzugen), können wir font-display: block verwenden. Der Text bleibt jedoch nicht für immer unsichtbar: Wenn die Schrift für einen bestimmten Zeitraum (normalerweise drei Sekunden) nicht geladen wird, verwendet der Browser die Fallback-Schrift weiterhin und ersetzt sie nach dem Laden durch die Web-Schrift.
Wenn Sie der Meinung sind, dass dies die beste Option ist, weil Sie der Meinung sind, dass das Bild schlecht aussieht, denken Sie daran, dass Ihre Seite nicht verwendet werden kann und Ihr Inhalt nicht gelesen werden kann, wenn der Text unsichtbar ist.
zurückgreifen
Fallback ähnelt dem Swap mit zwei Unterschieden:
- Es beginnt mit einer unglaublich kleinen "Block" -Periode (~ 100 ms), in der der Text ausgeblendet wird. Danach wird die Fallback-Schriftart angezeigt.
- Wenn die Webschrift für kurze Zeit (~ 3 s) nicht geladen wird, wird die Fallback-Schrift bis zum Ende der Seite verwendet.
Wenn Sie sich keine Sorgen darüber machen, ob ein Benutzer Ihre Webschrift beim ersten Besuch Ihrer Website sieht (das interessiert ihn wahrscheinlich nicht so sehr), ist Fallback eine gute Wahl.
Optional
optional ähnelt Fallback, gibt der Schrift jedoch eine sehr kurze Zeitspanne (~ 100 ms) zum Laden, nach der sie nicht ersetzt wird. Es verfügt jedoch über eine zusätzliche Funktion, mit der der Browser entscheiden kann, die Schriftartenanforderung abzubrechen, wenn die Verbindung zum Laden der Schrift zu langsam ist.
foit/fout — , . ( . - Mitt Romney). JavaScript ( ).
3.
Um die Foit / Fout-Zeit zu minimieren, möchten wir unsere Web-Font-Dateien so schnell wie möglich laden. Mit
link rel = "preload"
in unserem HTML
head
, können wir dem Browser mitteilen , zu beginnen unsere Schriftarten holen früher. Fügen Sie das folgende Tag oben in Ihr
head
(vor jedem CSS) ein, indem Sie ein Attribut
href
für die URL Ihrer Schriftartdatei festlegen:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
Durch Hinzufügen dieses Tags weisen wir den Browser an, sofort mit dem Herunterladen unserer Schriftdatei zu beginnen, normalerweise jedoch nicht Beginnen Sie, bis der Link zu einer bestimmten Schriftart in Ihrem CSS gefunden wird und das dom-Element, das ihn verwendet, nicht mehr gefunden wird.
Browser sind normalerweise intelligent genug, um Schriftarten nur dann zu laden, wenn sie auf der aktuellen Seite benötigt werden. Die Verwendung des Vorladens überschreibt dieses Verhalten und zwingt den Browser, die Schriftart herunterzuladen, auch wenn sie nicht verwendet wird. Laden Sie aus diesem Grund immer nur ein Format für jede Schriftart vor (woff2, falls Sie eines haben).
Je mehr Schriftarten Sie vorab laden, desto weniger profitieren Sie von dieser Methode. Bevorzugen Sie daher Schriftarten, die „über der Falte“ angezeigt werden (die ersten 100 VH, die der Benutzer ohne Bildlauf sieht).
Weitere Informationen zum Vorladen finden Sie in diesem Artikel von Yoav Weiss: Vorladen: Wofür ist es gut?
4. Nehmen Sie die Schriftdateien auf
Durch Erstellen einer Teilmenge der Schriftart können wir eine neue kleinere Schriftartdatei generieren, die nur die Glyphen enthält (eine Glyphe ist ein einzelnes Zeichen oder Zeichen), die wir benötigen. Ich habe das Font Subsetter-Tool in Everything Fonts verwendet, um mit der für die Überschriften auf dieser Site verwendeten Space Grotesk Bold- Schriftart übereinzustimmen , die nur einfache lateinische Zeichen enthält. Dies reduzierte die Dateigröße der woff2-Version von 30 KB auf 7 KB.
Subset ist ein leistungsstarkes Tool, das jedoch einige potenzielle Nachteile aufweist. Wenn Sie eine Website erstellen, auf der benutzergenerierte Inhalte, Personennamen oder Ortsnamen angezeigt werden, sollten Sie andere Zeichen als die 26 Standardbuchstaben, 10 Zahlen und einige Zeichen verwenden, die in der englischen Schrift üblich sind.
Zumindest sollten Sie über Diakritika nachdenken: Glyphen, die über oder unter einem Zeichen erscheinen und dessen Aussprache ändern. Sie sind in Sprachen wie Französisch, Spanisch, Vietnamesisch und transliteriertem (oder "romanisiertem") Text aus Alphabeten wie Griechisch oder Hebräisch üblich. Sie erscheinen auch in Lehnwörtern (Wörter aus einer anderen Sprache).
Wenn Sie zu viele Untermengen verwenden, erhalten Sie möglicherweise sogar eine Kombination von Schriftarten in einem Wort.
Wenn ich über den Heimwerker schreiben möchte, muss ich möglicherweise die Schriftart-Teilmengen-Datei anpassen, die ich für die Überschriften verwende. Beachten Sie, dass die Formen "â" und "é" (mit Akzenten) nicht mit den nicht akzentuierten Versionen dieser Buchstaben übereinstimmen.
Glücklicherweise müssen Sie nicht jede Seite Ihrer Website manuell auf unterschiedliche Zeichen überprüfen. GlyphhangerIst ein Befehlszeilenprogramm, das zwei Dinge ausführt: Erstens crawlt es Ihre Webseiten und bestimmt die verwendeten Unicode-Zeichenbereiche (diese Bereiche entsprechen dem Skript oder der Sprache, z. B. Basic Latin, Cyrillic, Thai); Zweitens handelt es sich um eine Teilmenge der Schriftartdatei, die eine neue Version ausgibt, die nur Zeichen aus den angegebenen Bereichen enthält.
Der Einstieg in Glyphhanger kann etwas schwierig sein (Sie benötigen Python und Pip) - Sarah Sueidan erklärt in diesem Artikel, wie sie es gemacht hat: Wie ich Glyphhanger unter macOS eingerichtet habe, um Schriftdateien für das Web zu optimieren und zu konvertieren .
Stellen Sie wie beim Ändern von Dateiformaten sicher, dass Ihre Schriftlizenz eine Teilmenge von zulässt.
5. Platzieren Sie die Schriftarten selbst
Dies ist keine universelle Regel, wie die meisten anderen. Es gibt zwei gute Gründe, warum Sie einen gehosteten Dienst wie Google Fonts oder Adobe Fonts verwenden möchten :
Dies ist häufig die billigste oder nur legale Möglichkeit, bestimmte Schriftarten im Internet zu verwenden. Wenn Sie keine andere Wahl haben, als einen dieser Dienste zu verwenden, prüfen Sie, ob er Teilmengen oder das Hinzufügen von Deskriptoren für die Schriftanzeige unterstützt.
Sie sind praktisch: Das Kopieren und Einfügen einer HTML-Zeile in Ihre Site ist schneller als die Alternative: Herunterladen der Schriftdateien, Konvertieren und Teilmenge der Schriftdateien und anschließendes Schreiben von @ font-face at-rules für jedes Gewicht und jeden Stil.
Wenn Sie Google Fonts immer noch nur zur Vereinfachung verwenden, schauen Sie sich google-webfonts-helper an . Mit diesem Tool können Sie Ihr eigenes Web-Schriftartenpaket aus dem vollständigen Google-Schriftartensatz erstellen, die gewünschten Gewichte und Zeichensätze definieren und anschließend einen Download mit allen benötigten CSS- und Schriftdateien (in den neuesten Formaten) bereitstellen.
Mythos Nr. 1 über Web-Schriftarten
Möglicherweise haben Sie die Behauptung gehört (die in Google Fonts wiederholt wird), dass der Browser diese Website nicht erneut herunterladen muss, wenn ein Benutzer zuvor eine Website besucht hat, auf der dieselben Schriftarten von derselben Quelle heruntergeladen wurden werden zwischengespeichert ...
Sobald dies wahr gewesen sein mag, kann ich keine Beweise dafür finden, dass dies ein Phänomen ist, das häufig genug ist, um etwas zu beeinflussen. Tatsächlich verbieten sowohl Google Chrome als auch Safari aufgrund von Tracking-Problemen ausdrücklich die gemeinsame Nutzung zwischengespeicherter Ressourcen von Drittanbietern zwischen Domains.
Hier ist eine Liste guter Gründe, den gehosteten Dienst nicht zu verwenden und stattdessen die Schriftarten selbst zu hosten:
Performance
Das Auffinden einer Domäne nimmt Zeit in Anspruch. Sie können Ressourcenhinweise verwenden , um die Situation zu vereinfachen. Die Leistung wird jedoch immer beeinträchtigt, wenn Sie eine TCP-Verbindung zu einer neuen Domäne herstellen. Dies kann der Grund sein, warum einige von Googles eigenen Websites (einschließlich web.dev ) jetzt native Schriftarten anstelle von Google-Schriftarten verwenden.
Vertraulichkeit
Bezahlte Web-Font-Dienste wie Adobe Fonts müssen Seitenaufrufe für Berechnungen ermitteln, erfassen jedoch möglicherweise mehr Daten als unbedingt erforderlich. Wenn Sie die Wahl haben, laden Sie Schriftarten mit css (
link rel = "stylesheet"
) anstelle von JavaScript (
script
), um die Datenmenge zu minimieren, die Dritte möglicherweise über Ihre Benutzer sammeln.
Es sieht so aus, als ob Google Fonts nicht so viele Website-Besucher sammelt wie IP-Adressen und Zeichenfolgen von Benutzeragenten, aber Google ist nicht völlig selbstlos, wenn es darum geht, den Dienst kostenlos bereitzustellen. Jede der fünfzig Billionen Seitenaufrufe mit Google-Schriftarten ist ein Datenpunkt, den Google nicht hätte, wenn Websites stattdessen ihre eigenen Schriftarten verwenden würden.
Steuerung
Mit Offline-Schriftarten haben Sie die vollständige Kontrolle darüber, wie Sie die Schriftarten laden. So können Sie benutzerdefinierte Teilmengen bereitstellen, Optionen für die Anzeige von Schriftarten definieren und festlegen, wie lange der Browser Schriftdateien zwischenspeichern soll.
Verlässlichkeit
Dienste von Drittanbietern können langsamer werden, die Verbindung trennen oder ganz aufhören zu arbeiten . Bei selbst gehosteten Schriftarten sind Ihre Schriftarten verfügbar, während Ihre Website aktiv ist.
Fazit
Jeder dieser Schritte kann seine eigenen Vorteile haben, aber die gemeinsame Verwendung kann zu großen Verbesserungen führen. Wenn Sie einige der Schritte in diesem Artikel ausführen möchten, verwenden Sie vor und nach dem Vornehmen Ihrer Änderungen ein Tool wie Lighthouse oder Web Page Test , um die Auswirkungen jeder einzelnen Änderung zu ermitteln.
In Teil zwei werden einige der fortgeschritteneren Techniken vorgestellt, darunter Strategien zum Laden von JavaScript-Schriftarten und variable Schriftarten. Wir werden auch sehen, wie wichtig es ist, die richtigen Fallback-Schriftarten auszuwählen und ein neues Akronym einzuführen - FOFT, Flash Of Faux Text.
Um meine Designergebnisse nicht in Tonnen von Lesezeichen auf meinem Computer zu verlieren, habe ich den Drin Design Telegram-Kanal erstellt . Alle coolen und nützlichen Materialien (Tutorials, Artikel, Links zu Berichten über coole Typen), die ich für mich selbst finde, werde ich dort veröffentlichen. Bedienen Sie sich.