Die Entscheidung für das Verhalten eines Web-Fonts beim Laden kann eine wichtige Methode zur Leistungsoptimierung sein. Mit dem neuen „font-display“-Beschreibungselement für @font-face können Entwickler festlegen, wie ihre Webschriften gerendert (oder zurückgegriffen wird), je nachdem, wie lange das Laden dauert.
Unterschiede beim Schriftrendering
Mit Web Fonts können Entwickler in ihre Projekte eine umfangreiche Typografie einbinden. Der Nachteil ist, dass der Browser einige Zeit benötigt, um die Schriftart herunterzuladen, wenn der Nutzer sie nicht bereits hat. Da Netzwerke manchmal instabil sind, kann sich diese Downloadzeit negativ auf die Nutzerfreundlichkeit auswirken. Schließlich interessiert es niemanden, wie schön Ihr Text ist, wenn er unverhältnismäßig lange zum Anzeigen braucht.
Um das Risiko eines langsamen Schriftartendownloads zu minimieren, implementieren die meisten Browser eine Zeitüberschreitung, nach der eine Fallback-Schriftart verwendet wird. Das ist eine nützliche Methode, aber leider unterscheiden sich die Browser in der tatsächlichen Implementierung.
| Browser | Zeitlimit | Fallback | Swap-Speicher |
|---|---|---|---|
| Chrome 35 und höher | 3 Sekunden | Ja | Ja |
| Opera | 3 Sekunden | Ja | Ja |
| Firefox | 3 Sekunden | Ja | Ja |
| Internet Explorer | 0 Sekunden | Ja | Ja |
| Safari | Kein Zeitlimit | – | – |
- In Chrome und Firefox beträgt die Zeitüberschreitung drei Sekunden, nach der der Text in der Fallback-Schriftart angezeigt wird. Wenn der Download der Schriftart erfolgreich war, wird sie ersetzt und der Text wird mit der gewünschten Schriftart neu gerendert.
- Der Internet Explorer hat eine Zeitüberschreitung von null Sekunden, was zu einem sofortigen Text-Rendering führt. Wenn die angeforderte Schriftart noch nicht verfügbar ist, wird ein Fallback verwendet und der Text wird später noch einmal gerendert, sobald die angeforderte Schriftart verfügbar ist.
- Safari hat kein Zeitüberschreitungsverhalten (zumindest nichts über ein grundlegendes Netzwerk-Zeitlimit hinaus).
Erschwerend kommt hinzu, dass Entwickler nur begrenzt Einfluss darauf haben, wie sich diese Regeln auf ihre Anwendung auswirken. Entwickler, die auf Leistung bedacht sind, bevorzugen möglicherweise eine schnellere Erstansicht mit einem Fallback-Schriftbild und nutzen die schönere Webschrift nur bei nachfolgenden Besuchen, nachdem sie heruntergeladen wurde. Mit Tools wie der Font Loading API ist es unter Umständen möglich, einige der Standardbrowser-Verhaltensweisen zu überschreiben und Leistungssteigerungen zu erzielen. Allerdings müssen Sie dafür eine nicht unerhebliche Menge an JavaScript schreiben, die dann in die Seite eingefügt oder aus einer externen Datei angefordert werden muss. Dies führt zu einer zusätzlichen HTTP-Latenz.
Um diese Situation zu verbessern, hat die CSS-Arbeitsgruppe einen neuen @font-face-Beschreibungsblock, font-display, und eine entsprechende Property vorgeschlagen, um zu steuern, wie ein herunterladbarer Schriftschnitt gerendert wird, bevor er vollständig geladen ist.
Zeitpläne für den Download von Schriftarten
Ähnlich wie bei den vorhandenen Zeitüberschreitungen für Schriftarten, die einige Browser derzeit implementieren, unterteilt font-display die Lebensdauer eines Schriftdownloads in drei Hauptzeiträume.
- Der erste Zeitraum ist der Schriftblockzeitraum. Wenn die Schriftart in diesem Zeitraum nicht geladen wird, muss jedes Element, das sie verwenden soll, stattdessen mit einer unsichtbaren Fallback-Schriftart gerendert werden. Wenn die Schriftart während des Blockierungszeitraums erfolgreich geladen wird, wird sie normal verwendet.
- Der Zeitraum für den Schriftschnittwechsel folgt unmittelbar nach dem Zeitraum für den Schriftblock. Wird die Schriftart in diesem Zeitraum nicht geladen, muss jedes Element, das sie verwenden soll, stattdessen mit einer Fallback-Schriftart gerendert werden. Wenn die Schriftart während des Austauschzeitraums erfolgreich geladen wird, wird sie normal verwendet.
- Die Zeitspanne für Schriftfehler beginnt unmittelbar nach der Schriftschnitt-Austauschzeit. Wenn das Schriftbild zu Beginn dieses Zeitraums noch nicht geladen ist, wird es als fehlgeschlagenes Laden markiert, was zu einem normalen Schrift-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 dargestellt werden soll, je nachdem, ob und wann sie heruntergeladen wurde.
Welche Schriftart ist die richtige für mich?
Wenn Sie den font-display-Beschreibungsblock verwenden möchten, fügen Sie ihn Ihren @font-face-At-Rules 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 Schriftanzeigestrategie verwendet. Die meisten Browser haben derzeit eine Standardstrategie, die der Option blockieren ähnelt.
Block
block gibt dem Schriftschnitt eine kurze Blockzeit (in den meisten Fällen werden 3 Sekunden empfohlen) und eine unbegrenzte Auslagerungszeit. Mit anderen Worten: Der Browser zeichnet zuerst „unsichtbaren“ Text, wenn die Schriftart nicht geladen ist, tauscht sie aber sofort aus, sobald sie geladen ist. Dazu erstellt der Browser ein anonymes Schriftbild mit ähnlichen Messwerten wie die ausgewählte Schrift, aber ohne „Tinte“ in den einzelnen Zeichen. Dieser Wert sollte nur verwendet werden, wenn das Rendern von Text in einer bestimmten Schriftart für die Nutzbarkeit der Seite erforderlich ist.
Swap-Speicher
swap gibt dem Schriftbild eine Blockzeit von null Sekunden und eine unendliche Auslagerungszeit. Das bedeutet, dass der Browser Text sofort mit einem Fallback anzeigt, wenn die Schriftart nicht geladen ist, aber die Schriftart sobald sie geladen ist, ersetzt. Ä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 trotzdem die richtige Botschaft vermittelt. Der Logotext eignet sich gut für den Austausch, da die Botschaft auch mit einem angemessenen Fallback-Schriftbild vermittelt wird, Sie aber letztendlich die offizielle Schriftart verwenden würden.
Fallback
Mit fallback wird der Schriftart eine extrem kurze Blockierungszeit (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine kurze Auslagerungszeit (in den meisten Fällen werden drei Sekunden empfohlen) zugewiesen. Mit anderen Worten: Wenn die Schriftart nicht geladen wird, wird sie zuerst mit einem Fallback gerendert. 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 eignet sich gut für Textkörper, bei denen Nutzer so schnell wie möglich mit dem Lesen beginnen sollen und die Nutzerfreundlichkeit nicht durch das Verschieben von Text beim Laden einer neuen Schrift beeinträchtigt werden soll.
optional
optional gibt der Schriftart eine extrem kurze Blockzeit (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine Null-Sekunden-Austauschzeit. Ähnlich wie bei Fallbacks ist dies eine gute Wahl, wenn die heruntergeladene Schrift eher ein „Nice-to-have“ ist, aber nicht für die Nutzerfreundlichkeit entscheidend ist. Bei dem Wert optional entscheidet der Browser, ob er den Schriftartendownload initiiert. Er kann dies tun oder auch nicht, je nachdem, was er für den Nutzer am besten hält. Das kann in Situationen von Vorteil sein, in denen der Nutzer eine schlechte Verbindung hat und das Herunterladen einer Schriftart nicht die beste Ressourcennutzung darstellt.
Unterstützte Browser
font-display ist derzeit in Chrome 49 für Desktop-Computer hinter der Flagge „Experimentelle Webplattformfunktionen“ zu finden 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 in Ihrem Werkzeugkasten sein.