Schriftartleistung mit Font-Anzeige steuern

Rob Dodson

Das Verhalten einer Webfont während des Ladens festzulegen, kann eine wichtige Technik zur Leistungsoptimierung sein. Mit dem neuen font-display-Deskriptor für @font-face können Entwickler festlegen, wie ihre Webfonts gerendert werden (oder auf welche Schriftarten zurückgegriffen wird), je nachdem, wie lange das Laden dauert.

Unterschiede beim Rendern von Schriftarten

Webfonts ermöglichen es Entwicklern, ansprechende Typografie in ihre Projekte einzubinden. Wenn der Nutzer jedoch noch keine Schriftart besitzt, muss der Browser sie erst herunterladen. Da Netzwerke instabil sein können, kann sich diese Downloadzeit negativ auf die Nutzererfahrung auswirken. Schließlich interessiert es niemanden, wie schön Ihr Text ist, wenn es ewig dauert, bis er angezeigt wird.

Um das Risiko eines langsamen Schriftart-Downloads zu minimieren, implementieren die meisten Browser ein Zeitlimit, nach dem eine Fallback-Schriftart verwendet wird. Das ist eine nützliche Technik, aber leider unterscheiden sich die Browser in der tatsächlichen Implementierung.

• In Chrome und Firefox wird nach einem Timeout von drei Sekunden der Text mit der Fallback-Schriftart angezeigt. Wenn die Schriftart heruntergeladen wird, erfolgt schließlich ein Tausch und der Text wird mit der gewünschten Schriftart neu gerendert.
• Internet Explorer hat ein Zeitlimit von null Sekunden, was zu einem sofortigen Rendern von Text führt. Wenn die angeforderte Schriftart noch nicht verfügbar ist, wird eine Ersatzschriftart verwendet und der Text wird später neu gerendert, sobald die angeforderte Schriftart verfügbar ist.
• Safari hat kein Zeitlimitverhalten (oder zumindest nichts über ein grundlegendes Netzwerkzeitlimit hinaus).

Erschwerend kommt hinzu, dass Entwickler nur begrenzt beeinflussen können, wie sich diese Regeln auf ihre Anwendung auswirken. Ein leistungsbewusster Entwickler bevorzugt möglicherweise eine schnellere erste Darstellung mit einer Ersatzschriftart und verwendet die schönere Webschriftart erst bei nachfolgenden Besuchen, nachdem sie heruntergeladen wurde. Mit Tools wie der Font Loading API lassen sich möglicherweise einige der Standardbrowserfunktionen überschreiben und die Leistung steigern. Dies erfordert jedoch, dass Sie eine nicht unerhebliche Menge an JavaScript-Code schreiben, der dann in die Seite eingefügt oder aus einer externen Datei angefordert werden muss, was zu zusätzlicher HTTP-Latenz führt.

Um diese Situation zu beheben, hat die CSS Working Group einen neuen @font-face-Deskriptor, font-display, und eine entsprechende Property vorgeschlagen, mit der gesteuert werden kann, wie eine herunterladbare Schriftart gerendert wird, bevor sie vollständig geladen ist.

Zeitachse für den Schriftart-Download

Ähnlich wie bei den vorhandenen Zeitüberschreitungsverhalten für Schriftarten, die einige Browser heute implementieren, unterteilt font-display die Lebensdauer eines Schriftart-Downloads in drei Hauptzeiträume.

1. Der erste Zeitraum ist der Schriftblockzeitraum. Wenn die Schriftart in diesem Zeitraum nicht geladen wird, muss jedes Element, das sie verwendet, stattdessen mit einer unsichtbaren Ersatzschriftart gerendert werden. Wenn die Schriftart während des Blockierungszeitraums erfolgreich geladen wird, wird sie danach normal verwendet.
2. Der Schriftart-Tauschzeitraum beginnt unmittelbar nach dem Schriftart-Blockierungszeitraum. Wenn die Schriftart in diesem Zeitraum nicht geladen wird, muss jedes Element, das sie verwendet, stattdessen mit einer Ersatzschriftart gerendert werden. Wenn die Schriftart während des Tauschzeitraums erfolgreich geladen wird, wird sie normal verwendet.
3. Der Zeitraum für Schriftartfehler beginnt unmittelbar nach dem Zeitraum für den Schriftartwechsel. Wenn die Schriftart noch nicht geladen ist, wenn dieser Zeitraum beginnt, wird sie als fehlgeschlagenes Laden markiert, was zu einem normalen Schriftart-Fallback führt. Andernfalls wird die Schriftart normal verwendet.

Wenn Sie diese Zeiträume kennen, können Sie mit font-display festlegen, wie Ihre Schriftart gerendert werden soll, je nachdem, ob und wann sie heruntergeladen wurde.

Welche Font-Display-Einstellung ist die richtige für Sie?

Wenn Sie den Deskriptor font-display verwenden möchten, fügen Sie ihn Ihren @font-face-Regeln 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 Schriftartwiedergabe verwendet. Die meisten Browser verwenden derzeit eine Standardstrategie, die block ähnelt.

Block

Mit block wird dem Schrift-Face ein kurzer Blockierungszeitraum (in den meisten Fällen werden 3 Sekunden empfohlen) und ein unendlicher Swap-Zeitraum zugewiesen. Das bedeutet, dass der Browser zuerst „unsichtbaren“ Text rendert, wenn die Schriftart noch nicht geladen ist. Sobald sie geladen ist, wird die Schriftart jedoch ausgetauscht. Dazu erstellt der Browser eine anonyme Schriftart mit Messwerten, die der ausgewählten Schriftart ähneln, aber alle Glyphen enthalten keine „Tinte“. Dieser Wert sollte nur verwendet werden, wenn die Seite nur dann nutzbar ist, wenn Text in einer bestimmten Schriftart gerendert wird.

Swap-Speicher

Mit swap erhält die Schriftart einen Blockzeitraum von null Sekunden und einen unendlichen Swap-Zeitraum. Das bedeutet, dass der Browser Text sofort mit einem Fallback rendert, wenn die Schriftart nicht geladen wird. Sobald sie geladen ist, wird die Schriftart jedoch ausgetauscht. Ähnlich wie bei block sollte dieser Wert nur verwendet werden, wenn das Rendern von Text in einer bestimmten Schriftart für die Seite wichtig ist, aber das Rendern in einer beliebigen Schriftart immer noch eine korrekte Nachricht vermittelt. Logotext eignet sich gut für swap, da die Botschaft auch mit einem angemessenen Fallback vermittelt werden kann, aber letztendlich die offizielle Schriftart verwendet werden sollte.

Fallback

Mit fallback wird dem Schrift-Face ein extrem kurzer Blockierungszeitraum (in den meisten Fällen werden 100 ms oder weniger empfohlen) und ein kurzer Tauschzeitraum (in den meisten Fällen werden drei Sekunden empfohlen) zugewiesen. Das bedeutet, dass die Schriftart zuerst mit einem Fallback gerendert wird, wenn sie nicht geladen ist. Sobald sie geladen ist, wird sie jedoch ausgetauscht. Wenn jedoch zu viel Zeit vergeht, wird der Fallback für den Rest der Lebensdauer der Seite verwendet. fallback ist eine gute Option für Dinge wie Fließtext, bei dem der Nutzer so schnell wie möglich mit dem Lesen beginnen soll und bei dem die Nutzerfreundlichkeit nicht durch das Verschieben von Text beim Laden einer neuen Schriftart beeinträchtigt werden soll.

optional

optional weist der Schriftart einen extrem kurzen Blockierungszeitraum (in den meisten Fällen werden 100 ms oder weniger empfohlen) und einen Swap-Zeitraum von null Sekunden zu. Ähnlich wie fallback ist dies eine gute Wahl, wenn das Herunterladen der Schriftart eher ein „Nice-to-have“ ist und nicht entscheidend für die Nutzerfreundlichkeit. Mit dem optional-Wert wird dem Browser die Entscheidung überlassen, ob der Schriftart-Download initiiert werden soll. Der Browser kann sich dafür entscheiden, dies nicht zu tun, oder er kann den Download mit niedriger Priorität durchführen, je nachdem, was er für den Nutzer am besten hält. Das kann in Situationen von Vorteil sein, in denen der Nutzer eine schwache Verbindung hat und das Herunterladen einer Schriftart möglicherweise nicht die beste Nutzung von Ressourcen ist.

Unterstützte Browser

font-display ist derzeit in Chrome 49 für Desktop-Computer hinter dem Flag „Experimental Web Platform Features“ (Experimentelle Webplattformfunktionen) verfügbar und wird in Opera und Opera für Android ausgeliefert.

Demo

Sehen Sie sich das Beispiel an, um font-display auszuprobieren. Für leistungsorientierte Entwickler kann es ein weiteres nützliches Tool sein.