Die Festlegung des Verhaltens einer Webschriftart beim Laden kann eine wichtige Technik zur Leistungsoptimierung sein. Mit dem neuen Schriftart-Anzeigedeskriptor für @font-face können Entwickler entscheiden, wie ihre Webschriftarten gerendert werden (oder wie ein Fallback verwendet wird), je nachdem, wie lange das Laden dauert.
Heutige Unterschiede beim Rendering von Schriftarten
Mit Web Fonts haben Entwickler die Möglichkeit, umfassende Typografie in ihre Projekte zu integrieren. Allerdings muss der Browser, wenn der Nutzer noch nicht über eine Schriftart verfügt, diese herunterladen. Da Netzwerke instabil sein können, kann sich diese Downloadzeit negativ auf die Nutzererfahrung auswirken. Schließlich ist es niemandem, wie hübsch Ihr Text ist, wenn er ungewöhnlich lange zum Anzeigen benötigt!
Die meisten Browser implementieren eine Zeitüberschreitung, nach der eine Fallback-Schriftart verwendet wird, um das Risiko eines langsamen Downloads von Schriftarten zu verringern. Diese Methode ist zwar nützlich, aber die tatsächliche Implementierung kann von Browsern abweichen.
| Browser | Zeitlimit | Fallback | Swap-Speicher |
|---|---|---|---|
| Chrome (ab Version 35) | 3 Sekunden | Ja | Ja |
| Opera | 3 Sekunden | Ja | Ja |
| Firefox | 3 Sekunden | Ja | Ja |
| Internet Explorer | 0 Sekunden | Ja | Ja |
| Safari | Keine Zeitüberschreitung | – | – |
- In Chrome und Firefox gibt es ein Zeitlimit von drei Sekunden, nach dem der Text mit der Fallback-Schriftart angezeigt wird. Wenn der Download der Schriftart gelingen, erfolgt schließlich ein Tausch und der Text wird mit der gewünschten Schriftart noch einmal gerendert.
- Im Internet Explorer gibt es eine Zeitüberschreitung von null Sekunden, die zur sofortigen Textdarstellung führt. Wenn die gewünschte 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 (oder zumindest keine über das Standard-Netzwerkzeitlimit hinaus).
Außerdem haben Entwickler nur begrenzte Kontrolle darüber, wie sich diese Regeln auf ihre Anwendung auswirken. Ein leistungsorientierter Entwickler könnte es vorziehen, eine schnellere anfängliche Schriftart mit einer Fallback-Schriftart zu verwenden und die ansprechendere Webschrift erst bei nachfolgenden Besuchen zu nutzen, nachdem sie die Möglichkeit zum Herunterladen hatte. Mit Tools wie der Font Loading API können möglicherweise einige der Standardeinstellungen des Browsers überschrieben und Leistungssteigerungen erzielt werden. Allerdings muss dafür sehr viel JavaScript geschrieben werden, das dann in die Seite eingefügt oder von einer externen Datei angefordert werden muss. Dadurch erhöht sich die HTTP-Latenz.
Um dieses Problem zu beheben, hat die CSS-Arbeitsgruppe den neuen @font-face-Deskriptor font-display und eine entsprechende Property vorgeschlagen, um zu steuern, wie eine herunterladbare Schriftart gerendert wird, bevor sie vollständig geladen ist.
Zeitachsen für den Download von Schriftarten
Ähnlich wie die bestehenden Zeitüberschreitungen bei Schriftarten, die derzeit von einigen Browsern implementiert werden, unterteilt font-display die Lebensdauer eines Schriftartdownloads in drei Hauptperioden.
- Der erste Punkt ist der Zeitraum für die Blockierung von Schriftarten. Wenn die Schriftart während dieses Zeitraums nicht geladen wird, muss jedes Element, das sie verwenden möchte, stattdessen mit einer unsichtbaren Fallback-Schriftart gerendert werden. Wird die Schriftart während des Blocks erfolgreich geladen, wird sie normal verwendet.
- Der Zeitraum für den Austausch der Schriftarten tritt unmittelbar nach dem Zeitraum für die Schriftblockierung auf. 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 Auslagerungszeitraums erfolgreich geladen wird, wird sie normal verwendet.
- Der Zeitraum für Schriftfehler tritt unmittelbar nach dem Zeitraum für die Auslagerung der Schrift auf. Wenn die Schriftart zu Beginn dieses Zeitraums noch nicht geladen ist, wird sie als fehlgeschlagener Ladevorgang gekennzeichnet, 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 entscheiden, wie deine Schriftart gerendert werden soll, je nachdem, ob oder wann sie heruntergeladen wurde.
Welche Schriftart ist die richtige für dich?
Fügen Sie den font-display-Deskriptor zu den @font-face at-rules hinzu, um mit dem Deskriptor zu arbeiten:
@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 die folgenden Wertebereiche auto | block | swap | fallback | optional.
Automatisch
auto verwendet die vom User-Agent verwendete Schriftartanzeigestrategie. Die meisten Browser haben derzeit eine Standardstrategie ähnlich wie Blockieren.
Blocken
block gibt der Schriftart einen kurzen Blockzeitraum (3 s wird in den meisten Fällen empfohlen) und einen unendlichen Auslagerungszeitraum an. Das heißt, der Browser zeichnet zuerst "unsichtbaren" Text, wenn die Schriftart nicht geladen wird, tauscht die Schriftart jedoch aus, sobald sie geladen wird. Dazu erstellt der Browser eine anonyme Schriftart mit Messwerten, die der ausgewählten Schriftart ähnlich sind, aber ohne die Schriftzeichen "Tinte". Dieser Wert sollte nur verwendet werden, wenn Text in einem bestimmten Schriftbild gerendert werden muss, damit die Seite nutzbar ist.
Swap-Speicher
Swap gibt für die Schriftart einen Blockzeitraum von null Sekunden und einen unendlichen Auslagerungszeitraum an. Der Browser zeichnet also sofort Text mit einem Fallback, wenn die Schriftart nicht geladen wird, aber tauscht die Schriftart aus, sobald sie geladen wird. Ähnlich wie bei block sollte dieser Wert nur verwendet werden, wenn Text in einer bestimmten Schriftart gerendert wird, die für die Seite wichtig ist. Das Rendern in einer beliebigen Schriftart ist aber trotzdem korrekt. Ein Logotext eignet sich gut für einen Austausch, da durch die Anzeige des Namens eines Unternehmens mit einem angemessenen Fallback die Botschaft vermittelt wird, aber Sie würden letztlich die offizielle Schriftart verwenden.
Fallback
fallback gibt der Schriftart einen extrem kurzen Blockzeitraum (in den meisten Fällen maximal 100 ms empfohlen) und eine kurze Auslagerungszeit (in den meisten Fällen drei Sekunden) zu. Mit anderen Worten: Die Schriftart wird zuerst mit einem Fallback gerendert, wenn sie nicht geladen wird, aber die Schriftart wird beim Laden geändert. Verstreicht jedoch zu viel Zeit, wird das Fallback für die restliche Lebensdauer der Seite verwendet. Das Fallback-Element eignet sich gut für Elemente wie den Textkörper, bei dem der Nutzer so schnell wie möglich mit dem Lesen beginnen soll und der Text nicht durch eine neue Schriftart beeinträchtigt werden soll.
optional
optional gibt der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen 100 ms oder weniger empfohlen) und eine Auslagerungszeit von null Sekunden an. Ähnlich wie beim Fallback ist dies eine gute Wahl, wenn die heruntergeladene Schriftart zwar eher nett ist, aber nicht unbedingt nutzerfreundlich ist. Der Wert optional überlässt dem Browser die Entscheidung, ob der Download der Schriftart gestartet wird. Dies kann, je nachdem, was für den Nutzer am besten ist, mit niedriger Priorität erfolgen. 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 Ressourcennutzung ist.
Unterstützte Browser
font-display steht derzeit hinter dem Flag „Experimental Web Platform Features“ in der Desktopversion von Chrome 49 und wird in Opera und Opera für Android bereitgestellt.
Demo
Schau dir das Beispiel an und versuch es mit font-display. Für leistungsorientierte Entwickelnde kann sie
ein nützlicheres Tool sein.