Schriftartleistung mit Font-Anzeige steuern

Rob Dodson

Die Entscheidung, wie eine Webschriftart beim Laden verwendet werden soll, kann wichtigen Techniken zur Leistungsoptimierung. Der neue Schriftart-Anzeige-Deskriptor für Mit @font-face können Entwickler entscheiden, wie ihre Webschriftarten gerendert werden sollen (oder das Fallback). je nachdem, wie lange sie zum Laden brauchen.

Unterschiede beim Schriftrendering heute

Mit Web-Fonts können Entwickler eine umfassende Typografie mit dem Kompromiss, dass Nutzende, die nicht bereits eine Schriftart, die der Browser zuerst herunterladen muss. Da Netzwerke unzuverlässig sein, kann sich diese Download-Zeit nachteilig auf die Geschwindigkeit Nutzererfahrung. Schließlich ist es niemand wichtig, wie schön Ihr Text ist, wenn er die Anzeige sehr lange dauert!

Um das Risiko eines langsamen Download von Schriftarten zu verringern, implementieren die meisten Browser eine Zeitlimit, nach dem eine Fallback-Schriftart verwendet wird. Das ist eine nützliche Technik, Leider unterscheiden sich die Browser bei der Implementierung.

• Chrome und Firefox haben ein Zeitlimit von drei Sekunden, nach dem der Text angezeigt wird. durch die Fallback-Schriftart. Wenn die Schriftart heruntergeladen wird, und der Text wird mit der gewünschten Schriftart neu gerendert.
• Internet Explorer hat ein Zeitlimit von null Sekunden, was dazu führt, dass Ihnen zu verbessern. Wenn die angeforderte Schriftart noch nicht verfügbar ist, wird ein Fallback verwendet und Text wird später noch einmal gerendert, sobald die angeforderte Schriftart verfügbar ist.
• Safari hat kein Verhalten bei Zeitüberschreitungen (oder zumindest nichts außer einem Referenznetzwerk). Zeitüberschreitung).

Erschwerend kommt hinzu, dass die Entwickler nur begrenzt entscheiden können, wie diese Anwendung der Regeln auswirken. Leistungsorientierte Entwickelnde bevorzugen eine schnellere anfängliche Website mit einer Fallback-Schriftart. die noch schönere Web-Schriftart verwendet, wenn sie heruntergeladen werden konnte. Mit Tools wie der Font Loading API können einige Standard-Browserverhalten zu berücksichtigen und eine Leistungssteigerung zu erzielen. Kosten für das Schreiben nicht-trivialer Mengen an JavaScript, das dann in die Seite eingefügt oder von einer externen Datei angefordert werden, wodurch zusätzliche HTTP-Latenz.

Um dieses Problem zu beheben, hat die Arbeitsgruppe für Preisvergleichsportale einen neuen @font-face-Deskriptor, font-display und ein entsprechendes Attribut für Sie können steuern, wie eine herunterladbare Schriftart gerendert wird, bevor sie vollständig geladen wird.

Zeitachsen für den Download von Schriftarten

Ähnlich wie bei Zeitüberschreitungen für Schriftarten, die in einigen Browsern implementiert sind, Heute segmentiert font-display die Lebensdauer eines Schriftdownloads in drei Hauptversionen Zeiträume.

1. Der erste Punkt ist der Schriftblockzeitraum. Wenn während dieses Zeitraums Die Schriftart wurde nicht geladen. Jedes Element, das versucht, sie zu verwenden, muss stattdessen gerendert werden. mit einer unsichtbaren Fallback-Schriftart. Wenn die Schriftart während nach dem Blockzeitraum, wird die Schriftart normal verwendet.
2. Der Zeitraum für den Austausch der Schriftarten erfolgt unmittelbar nach dem Zeitraum für den Schriftartenblock. Währenddessen Wenn die Schriftart nicht geladen ist, wird sie von jedem Element, das versucht, sie zu verwenden, verwendet. muss mit einer Fallback-Schriftart gerendert werden. Schriftart geladen wird, wird die Schriftart normal verwendet.
3. Der Zeitraum mit Schriftfehlern tritt unmittelbar nach der Zeitraum für den Austausch der Schriftarten. Wurde die Schriftart zu Beginn dieses Zeitraums noch nicht geladen, wird es als fehlgeschlagener Ladevorgang markiert, was zu einem normalen Schrift-Fallback führt. Andernfalls wird die Schriftart Gesicht normal verwendet wird.

Wenn Sie diese Zeiträume verstehen, können Sie mit font-display entscheiden, sollte die Schriftart abhängig davon gerendert werden, ob oder wann sie heruntergeladen wurde.

Welche Schriftart-Anzeige ist die richtige für dich?

Wenn Sie mit dem Deskriptor font-display arbeiten möchten, fügen Sie ihn den At-Regeln von @font-face hinzu:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display unterstützt derzeit den folgenden Wertebereich auto | block | swap | fallback | optional.

Automatisch

Bei auto wird die vom User-Agent verwendete Strategie für die Schriftartanzeige verwendet. Die meisten Browser verwenden derzeit eine Standardstrategie ähnlich wie Blockieren.

Block

Durch block erhält die Schriftart eine kurze Blockperiode (in den meisten Fällen werden 3 Sekunden empfohlen). und einer unendlichen Tauschperiode. Mit anderen Worten, der Browser zeichnet „unsichtbar“ SMS wenn die Schriftart nicht geladen wird. Die Schriftart wird jedoch ausgetauscht, geladen wird. Dazu erstellt der Browser eine anonyme Schriftart mit Messwerten. die der ausgewählten Schriftart ähneln, aber alle Bildzeichen ohne "Tinte" enthalten. Dieser Wert sollte nur verwendet werden, wenn Text in einem bestimmten Schriftbild gerendert wird. ist erforderlich, damit die Seite nutzbar ist.

Swap-Speicher

Durch swap erhält die Schriftart eine Blockperiode von null Sekunden und einen unendlichen Austauschzeitraum. Der Browser zeichnet Text sofort mit einem Fallback, wenn die Schriftart nicht geladen, sondern tauscht die Schriftart direkt nach dem Laden aus. Ähnlich wie bei block, Dieser Wert sollte nur verwendet werden, wenn Text in einer bestimmten Schriftart wichtig für die Seite, aber beim Rendern in einer beliebigen Schriftart wird und Botschaft vermitteln. Der Logotext eignet sich gut zum Ersetzen, da ein n/a die offizielle Schriftart verwenden.

Fallback

fallback verleiht der Schriftart eine extrem kurze Blockperiode von 100 ms oder weniger. in den meisten Fällen empfohlen) und einer kurzen Austauschdauer (3 Sekunden werden empfohlen) in den meisten Fällen). Das heißt, die Schriftart wird mit einem Fallback wenn sie nicht geladen wird. Die Schriftart wird aber gleich beim Laden ausgetauscht. Sie können jedoch Verstreicht zu viel Zeit, wird das Fallback für den Rest der Seite verwendet, Lebensdauer. fallback eignet sich gut für Dinge wie den Textkörper, bei denen Sie die Nutzenden so schnell wie möglich mit dem Lesen beginnen und nicht gestört werden möchten, durch Verschieben des Textes, wenn eine neue Schriftart geladen wird.

optional

optional verleiht der Schriftart eine extrem kurze Blockperiode von 100 ms oder weniger. in den meisten Fällen empfohlen) und einen Tauschzeitraum von null Sekunden. Ähnlich wie bei fallback gilt: Dies ist eine gute Wahl, wenn die Schriftart zum Herunterladen eher nett ist. aber nicht entscheidend für die User Experience. Mit dem Wert optional kann nicht zur Entscheidung, ob der Download der Schriftart gestartet wird. oder mit niedriger Priorität, je nachdem, was sie für für den Nutzer am besten geeignet ist. Dies kann in Situationen nützlich sein, in denen Nutzende Schwache Internetverbindung und das Herunterziehen einer Schriftart sind möglicherweise nicht die beste Ressourceneinsparung.

Unterstützte Browser

font-display liegt derzeit hinter dem Flag „Experimental Web Platform Features“ (Experimentelle Webplattform-Funktionen) zurück in der Desktopversion von Chrome 49 und wird in Opera und Opera für Android bereitgestellt.

Demo

Sehen Sie sich dieses Beispiel an, um font-display pro Schlag. Für leistungsorientierte Entwickler nützlichen Werkzeugen.