Schriftartleistung mit Font-Anzeige steuern

Rob Dodson

Die Entscheidung über das Verhalten einer Webschriftart beim Laden kann eine wichtige Technik zur Leistungsoptimierung sein. Mit dem neuen Deskriptor für die Anzeige von Schriftarten für @font-face können Entwickler entscheiden, wie ihre Webschriftarten gerendert werden oder wie sie Fallbacks aussehen sollen, je nachdem, wie lange es dauert, bis sie geladen sind.

Unterschiede beim Schriftrendering heute

Web Fonts bieten Entwicklern die Möglichkeit, umfassende Typografie in ihre Projekte zu integrieren. Allerdings muss der Nutzer, wenn er noch nicht über ein Schriftbild verfügt, einige Zeit mit dem Herunterladen dieser Schriftart verbringen. Da Netzwerke instabil sein können, kann sich diese Downloadzeit nachteilig auf die Nutzerfreundlichkeit auswirken. Schließlich ist es niemand wichtig, wie schön Ihr Text ist, wenn die Anzeige sehr lange dauert.

Um das Risiko eines langsamen Download von Schriftarten zu verringern, implementieren die meisten Browser eine Zeitüberschreitung, nach der eine Fallback-Schriftart verwendet wird. Dies ist eine nützliche Methode, aber leider unterscheiden sich Browser von der tatsächlichen Implementierung.

• In Chrome und Firefox gilt ein Zeitlimit von drei Sekunden, nach dem der Text in der Fallback-Schriftart angezeigt wird. Wenn die Schriftart heruntergeladen wird, findet schließlich ein Austausch statt und der Text wird mit der gewünschten Schriftart neu gerendert.
• Internet Explorer hat ein Zeitlimit von null Sekunden, was dazu führt, dass der Text sofort gerendert wird. Wenn die angeforderte Schriftart noch nicht verfügbar ist, wird ein Fallback verwendet. Der Text wird später noch einmal gerendert, sobald die angeforderte Schriftart verfügbar ist.
• Safari hat kein Verhalten bei Zeitüberschreitung (oder zumindest nichts über eine grundlegende Netzwerkzeitüberschreitung hinaus).

Außerdem haben Entwickler nur begrenzte Kontrolle über die Auswirkungen dieser Regeln auf ihre Anwendung. Leistungsorientierte Entwickler bevorzugen möglicherweise eine schnellere anfängliche Version, bei der eine Fallback-Schriftart verwendet wird, und verwenden die bessere Webschriftart erst bei nachfolgenden Besuchen, nachdem sie die Möglichkeit hatten, sie herunterzuladen. Mit Tools wie der Font Loading API lassen sich möglicherweise einige Standardverhaltensweisen des Browsers überschreiben und die Leistung steigern. Allerdings müssen dabei nicht unerhebliche Mengen an JavaScript geschrieben werden, die dann in die Seite eingebunden oder von einer externen Datei angefordert werden müssen, was zu einer zusätzlichen HTTP-Latenz führt.

Um dieses Problem zu beheben, hat die CSS-Arbeitsgruppe den neuen @font-face-Deskriptor font-display und eine entsprechende Eigenschaft vorgeschlagen, mit der gesteuert wird, wie eine herunterladbare Schriftart gerendert wird, bevor sie vollständig geladen ist.

Zeitachsen für den Download von Schriftarten

Ähnlich wie bei Zeitüberschreitungen für Schriftarten, die in einigen Browsern bereits implementiert sind, segmentiert font-display die Lebensdauer eines Schriftartendownloads in drei Hauptabschnitte.

1. Der erste Punkt ist der Schriftblockzeitraum. Wenn die Schriftart während dieses Zeitraums nicht geladen wird, muss jedes Element, das versucht, sie zu verwenden, stattdessen mit einer unsichtbaren Fallback-Schriftart gerendert werden. Wenn die Schriftart während der Blockierungsphase erfolgreich geladen wird, wird sie normal verwendet.
2. Der Zeitraum für den Austausch der Schriftarten erfolgt unmittelbar nach dem Zeitraum für den Schriftartenblock. Wenn die Schriftart während dieses Zeitraums nicht geladen wird, muss jedes Element, das sie verwenden möchte, stattdessen mit einer Fallback-Schriftart gerendert werden. Wenn die Schriftart während des Austauschs erfolgreich geladen wird, wird sie normal verwendet.
3. Der Zeitraum für Schriftfehler tritt unmittelbar nach dem Zeitraum für den Schriftartenwechsel auf. Wenn die Schriftart zu Beginn dieses Zeitraums noch nicht geladen wurde, wird sie als fehlgeschlagener Ladevorgang markiert, was zu einem normalen Schrift-Fallback führt. Andernfalls wird die Schriftart normal verwendet.

Wenn du diese Zeiträume kennst, kannst du mit font-display festlegen, wie deine Schriftart je nachdem, ob oder wann sie heruntergeladen wurde, gerendert werden soll.

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. Bei den meisten Browsern gilt derzeit eine Standardstrategie wie block.

Blocken

block gibt der Schriftart eine kurze Blockperiode (in den meisten Fällen werden 3 s empfohlen) und einen unendlichen Austauschzeitraum. Mit anderen Worten, der Browser zeichnet zuerst "unsichtbaren" Text, wenn die Schriftart nicht geladen wird, und tauscht die Schriftart aus, sobald sie geladen wird. Dazu erstellt der Browser eine anonyme Schriftart mit Messwerten, die der ausgewählten Schriftart ähneln, aber alle Glyphen ohne „Tinte“ enthalten. Dieser Wert sollte nur verwendet werden, wenn das Rendern von Text in einem bestimmten Schriftbild erforderlich ist, damit die Seite nutzbar ist.

Swap-Speicher

Durch swap erhält die Schriftart eine Blockperiode von null Sekunden und einen unendlichen Austauschzeitraum. Das bedeutet, dass der Browser Text sofort mit einem Fallback zeichnet, wenn die Schriftart nicht geladen wird, die Schriftart aber direkt nach dem Laden eintauscht. Ähnlich wie block sollte dieser Wert nur verwendet werden, wenn für die Seite Text in einer bestimmten Schriftart wichtig ist. Beim Rendern in einer beliebigen Schriftart wird dennoch eine korrekte Meldung übertragen. Ein Logotext eignet sich gut für Swap, da die Anzeige des Unternehmensnamens in einem vernünftigen Fallback die Botschaft vermittelt, letztendlich aber die offizielle Schriftart verwendet wird.

Fallback

fallback bietet der Schriftart eine extrem kurze Blockperiode (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine kurze Auslagerungsphase (in den meisten Fällen von drei Sekunden). Das heißt, die Schriftart wird zuerst mit einem Fallback gerendert, wenn sie nicht geladen wird. Die Schriftart wird jedoch gleich beim Laden ausgetauscht. Wenn jedoch zu viel Zeit vergeht, wird das Fallback für den Rest der Lebensdauer der Seite verwendet. Fallback eignet sich beispielsweise für Textkörper, bei denen der Nutzer so schnell wie möglich mit dem Lesen beginnen soll und die Nutzererfahrung nicht durch das Verschieben des Textes beim Laden einer neuen Schriftart stören soll.

optional

optional gibt der Schriftart eine extrem kurze Blockperiode (in den meisten Fällen werden 100 ms oder weniger empfohlen) und einen Zeitraum von null Sekunden für den Austausch ein. Ähnlich wie das Fallback ist dies eine gute Wahl, wenn die heruntergeladene Schriftart eher nett ist, aber nicht entscheidend für die Nutzung ist. Über den Wert optional kann der Browser selbst entscheiden, ob der Download der Schriftart gestartet wird. Je nachdem, was für den Nutzer am besten ist, kann er dies entweder gar nicht oder mit niedriger Priorität tun. Dies kann in Situationen nützlich sein, in denen der Nutzer eine schwache Verbindung hat und das Herunterziehen einer Schriftart möglicherweise nicht die beste Nutzung von Ressourcen ist.

Unterstützte Browser

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

Demo

Sieh dir dieses Beispiel an, um font-display auszuprobieren. Für leistungsorientierte Entwickelnde kann es ein weiteres nützliches Tool in ihrem Werkzeug sein.