CSS-Schriftart-Display: Die Zukunft des Schriftarts im Web

Key Takeaways

• Der CSS-Schriftart-Display-Deskriptor bietet Entwicklern mehr Kontrolle darüber, wie Schriftarten beim Laden angezeigt werden, um die Benutzererfahrung und die wahrgenommene Leistung zu verbessern.
• Der Deskriptor arbeitet innerhalb des @font-face AT-RUE und bietet fünf mögliche Werte: Auto, Block, Swap, Fallback und optional. Jeder Wert stellt eine andere Strategie für den Umgang mit Schriftarten und Rendering dar.
• Der Deskriptor arbeitet in einer Zeitleiste, die in drei Zeiträume unterteilt ist: Block, Swap und Misserfolg. Die Dauer dieser Zeiträume, die vom Entwickler nicht explizit zugewiesen werden können, diktieren, wie ein Browser den Text rendern soll.
• Obwohl der CSS-Schriftart-Display-Deskriptor in allen Browsern noch nicht vollständig unterstützt wird, stellt er einen signifikanten Fortschritt bei der Standardisierung von Schriftstellungsverhalten im Web dar.

Einer der Nachteile der Verwendung von Web -Schriftarten ist, dass eine Schriftart, die auf dem Gerät eines Benutzers nicht verfügbar ist, sie heruntergeladen werden muss. Dies bedeutet, dass der Browser, bevor die Schrift verfügbar wird, entscheiden muss, wie die Anzeige eines beliebigen Textblocks mit dieser Schriftart verwendet wird. Und es muss dies auf eine Weise tun, die sich nicht wesentlich auf die Benutzererfahrung und die wahrgenommene Leistung auswirkt.

Im Laufe der Zeit haben Browser mehrere Strategien angewendet, um dieses Problem zu mildern. Aber sie tun dies auf unterschiedliche Weise und unter der Kontrolle von Entwicklern, die verschiedene Techniken und Problemumgehungen entwickeln mussten, um diese Probleme zu überwinden.

Geben Sie den Schrifriptor der Schrift-Display für das @font-face AT-RUE ein. Diese CSS -Funktion führt eine Möglichkeit vor, diese Verhaltensweisen zu standardisieren und Entwicklern mehr Kontrolle zu bieten.

Verwenden von Schriftarten

Bevor Sie sich ausführlich über die verschiedenen Funktionen des Schriftart-Displays befassen, überlegen wir kurz, wie Sie die Funktion in Ihrem CSS verwenden können.

Zunächst ist Schriftart-Display keine CSS-Eigenschaft, sondern wie im Intro erwähnt, es ist ein Deskriptor für die @font-face AT-Rule. Dies bedeutet, dass es in einer @font-face-Regel verwendet werden muss, wie im folgenden Code gezeigt:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Saira Condensed';
</span>  <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span>  <span>font-display: swap;
</span><span>}</span>

In diesem Snippet definiere ich einen Swap -Wert für die Schrift Saira Condensed.

Die Schlüsselwörter für alle verfügbaren Werte sind:

• Auto
• block
• Swap
• Fallback
• optional

Der Anfangswert für Schriftarten ist automatisch.

In späteren Abschnitten werde ich jede dieser Werte im Detail durchgehen. Schauen wir uns zunächst den Zeitraum an, in dem der Browser die zu rendere Schriftart ermittelt. Wenn ich jeden Werte diskutiere, werde ich die verschiedenen Aspekte der Zeitleiste und wie diese für jeden Wert verhalten.

Die Schrift-Display-Timeline

im Kern dieses Merkmals befindet sich das Konzept der Schrift-Display-Zeitleiste. Die Schriftzeit der Schriftart, die von ihrer Anfrage beginnt und mit dem erfolgreichen Laden oder Versagen endet, kann in drei aufeinanderfolgende Perioden unterteilt werden, in denen bestimmen, wie ein Browser den Text rendern soll. Diese drei Perioden sind wie folgt:

• Die Blockzeit. In dieser Zeit rendert der Browser den Text mit einer unsichtbaren Fallback -Schriftart. Wenn die angeforderte Schrift erfolgreich geladen wird, wird der Text mit dieser angeforderten Schriftart erneut übertragen. Die unsichtbare Fallback -Schriftart fungiert als leerer Platzhalter für den Text. Dies reduziert das Layout-Verschiebung, wenn die Wiederholung durchgeführt wird.
• Die Tauschzeit. Wenn die gewünschte Schriftart noch nicht verfügbar ist, wird die Fallback -Schriftart verwendet, aber diesmal ist der Text sichtbar. Wenn die Ladebaste hereinkommt, wird sie erneut verwendet.
• Die Ausfallzeit. Wenn die Schriftart nicht verfügbar ist, wartet der Browser nicht darauf, und der Text wird mit der Fallback -Schriftart auf der Dauer des aktuellen Seitenbesuchs angezeigt. Beachten Sie, dass dies nicht unbedingt bedeutet, dass die Schriftladung abgebrochen wird. Stattdessen kann der Browser sich dafür entscheiden, ihn fortzusetzen, damit die Schriftart für aufeinanderfolgende Seitenbesuche von demselben Benutzer verwendet werden kann.

Mit der Anpassung der Dauer solcher Zeiträume können Sie eine benutzerdefinierte Strategie zur Rendering von Text konfigurieren. Insbesondere können diese Dauer auf Null zusammenbrechen oder sich auf Unendlichkeit erstrecken, wie ich Ihnen in den folgenden Abschnitten zeigen werde.

, aber diese Dauer können vom Entwickler nicht explizit zugeordnet werden. Diese Möglichkeit wurde in einem frühen Stadium der Spezifikation untersucht, wurde jedoch fallen gelassen. Stattdessen wird eine Reihe vordefinierter Schlüsselwortwerte, die die Mehrheit der Anwendungsfälle verarbeiten können, wie im vorherigen Abschnitt angegeben.

Schauen wir uns an, wie jedes dieser Schlüsselwörter das Laden- und Anzeigeprozess der Schriftart verwaltet.

Schrift-Display: Auto

Dieser Wert fordert den Browser an, das vom Browser ausgewählte Standard -Schriftverhalten zu übernehmen. Oft ähnelt diese Strategie dem nächsten Wert, Block.

Schrift-Display: Block

Mit diesem Wert erstreckt sich nach einer kurzen Blockzeit (die Spezifikation empfiehlt eine Dauer von drei Sekunden), die Tauschzeit erstreckt sich auf unendlich. Dies bedeutet, dass unter diesen Umständen die Versagenperiode nicht vorhanden ist.

Während der Browser kurz auf die angeforderte Schriftart wartet, macht er den Text mit der unsichtbaren Fallback -Schriftart. Wenn die Schriftart noch nicht verfügbar ist, wird die Fallback -Schriftart sichtbar; Und wenn der Download abgeschlossen ist, wird der Browser den Text mit der gewünschten Schriftart erneut abgebaut.

Sie können dieses Verhalten im folgenden Video ansehen, auf dem eine einfache Testseite verwendet wird, die eine bestimmte Webschrift für die Überschrift enthält:

Zu Beginn des Seitenladens ist die Überschrift unsichtbar, aber es ist da, im DOM. Nach ungefähr drei Sekunden wird der Text mit der Fallback -Schriftart sichtbar, wenn die Schriftart noch nicht verfügbar ist. In der Video -Demo nachahm ich schlechte Netzwerkzustände mithilfe von Chrome Devtools Network Throcking -Funktion nach. Wenn es die Schriftart zum Herunterladen schafft, wird die Überschrift mit ihr erneut gerendert.

Schrift-Display: Swap

Mit diesem Wert bricht die Blockzeit auf 0 zusammen und die Tauschzeit erstreckt sich auf unendlich. Daher fehlt auch hier die Ausfallzeit.

Mit anderen Worten, der Browser wartet nicht auf die Schriftart, sondern macht den Text sofort mit der Fallback -Schriftart. Dann, wenn die Schriftart verfügbar ist, wird der Text damit erneut gerendert.

Überprüfen wir dies:

Schrift-Display: Fallback

Dies ist der erste Wert, der die Ausfallzeit enthält. Nach einer sehr kurzen Blockzeit (100 ms wird empfohlen) hat die Tauschzeit nun eine kurze Dauer (3S wird empfohlen). Wenn die angeforderte Schriftart am Ende dieses Zeitraums nicht fertig ist, wird der Text für die Dauer des Seitenbesuchs mit der Fallback -Schrift angezeigt. Dadurch wird vermieden, den Seitenbesucher mit einer verspäteten Layoutverschiebung zu stören, die an der Benutzererfahrung erscheinen könnte.

In diesem ersten Video unten wird die Schrift nach mehr als sechs Sekunden geladen, daher wird es nie in:

ausgetauscht

Im nächsten Video wird die Schrift schneller vor dem Timeout der Tauschperiode eingeladen, sodass die Schriftart wie erwartet verwendet wird:

Schrift-Display: Optional

Als ich die Spezifikation zum ersten Mal gelesen habe, fand ich die Namen, die den Schriftstellungsstrategien zugewiesen wurden, nicht so klar. Dies wird sogar in der Spezifikation selbst hingewiesen, die zukünftige Versionen der Spezifikationsnutzungsnamen vorschlägt, die die beabsichtigte Verwendung jeder Strategie besser veranschaulichen und die folgenden Alternativen vorschlagen:

• erfordert für Block
• wichtig für Swap
• bevorzugt für Fallback

, aber der optionale Wert wird voraussichtlich unverändert bleiben. In der Tat erfasst dieser Wert die Essenz des Verhaltens, das er auslöst. In diesem Fall gilt die Schriftart als optional für das Rendern der Seite und sagt dem Browser im Wesentlichen: Wenn die Schriftart bereits verfügbar ist, verwenden Sie sie, sonst spielt es keine Rolle, dass die Fallback -Schriftart; Die Schriftart der Schrift kann auf zukünftigen Seitenbesuchen .

verwendet werden.

Mit diesem Wert hat die Schriftartinformation der Schriftart einen kurzen Blockzeitraum (wiederum empfiehlt die Spezifikation ein Zeitintervall von 100 ms) und eine Null-Duration-Swap-Periode. Daher folgt die Ausfallzeit unmittelbar der Blockzeit, was bedeutet, dass die Schriftart, wenn sie nicht ohne weiteres verfügbar ist, nicht für die Dauer des Seitenbesuchs verwendet wird. Die Schriftart könnte jedoch schließlich vollständig im Hintergrund heruntergeladen werden und würden daher für die sofortige Wiedergabe auf zukünftigen Seitenladungen verfügbar sein.

Aber ich würde darauf hinweisen, dass der Benutzeragent, insbesondere unter schlechten Netzwerkbedingungen, abbricht oder sogar den Download des Schriftarts nicht beginnt. Dies hat sich nicht unnötig auf die Qualität der Netzwerkverbindung aus. Daher ist die Site immer noch verwendbar, aber die Schrift wird auf zukünftigen Seite nicht sofort verfügbar sein.

Im Video unten wird die Testseite geladen, ohne das Netzwerk zu drosseln. Die Schrift wird schnell heruntergeladen, jedoch erst nach der kurzen Blockzeit, sodass der Text für die gesamte Dauer des Besuchs mit der Fallback -Schriftart angezeigt wird. https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342072fontDisplay05.mp4

Im nächsten Video wird die Seite unter denselben Netzwerkbedingungen neu geladen, diesmal jedoch mit dem aktivierten Cache, um einen zweiten Besuch zu simulieren: https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342073fontDisplay06.mp4

Und da haben Sie es, die Überschrift macht jetzt die gewünschte Webschrift.

Beachten Sie vor dem Umzug die extrem kurze Dauer von rund 100 ms, die für die Blockzeit empfohlen werden, wenn die Fallback- und optionalen Werte verwendet werden. Dies soll eine kurze Zeit für eine schnellladende Schriftart (oder ein Laden aus dem Cache) zulassen

Ich habe mich tatsächlich gefragt, warum die Blockzeit bei Verwendung von Schriftarten: Swap auf Null zusammenbricht, anstatt das gleiche kurze Intervall wie optional zu verwenden. Es stellt sich heraus, dass es im Github Repo der Spezifikation ein offenes Problem gibt, damit „Swap“ dieselbe „winzige Blockzeit“ wie andere verwendet.

Über die Fallback -Schrift

In der obigen Diskussion erwähnte ich mehrmals die Fallback -Schriftart. Aber woher kommt das?

Die Fallback-Schriftart ist die erste verfügbare Schriftart im Schriftstapel, die mit der Eigenschaft der Schriftfamilie auf dem fraglichen Element definiert ist.

Auf der Testseite beispielsweise lautet der Schriftfamilienwert für die Überschrift:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Saira Condensed';
</span>  <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span>  <span>font-display: swap;
</span><span>}</span>

Dies kann verifiziert werden (siehe Video oben für optionale

Support

Zum Zeitpunkt des Schreibens der Unterstützung für den Schrift-Display-Deskriptor sieht wie folgt aus:

Chrome hat es seit Version 60

unterstützt
• Opera hat es seit Version 47
unterstützt
• Es ist für Firefox in der Entwicklung und ist seit Version 46 hinter einem Flaggen erhältlich.
• In Bezug auf Safari berichtet der Status der Webkit -Plattform, dass es sich in der Entwicklung befindet
• Es gibt noch keinen Hinweis darauf, dass Microsoft Edge es bald unterstützen wird. Auf der Microsoft Edge Developer -Feedback -Site befindet sich ein Ticket, auf dem die Implementierung dieser Funktion stimmen kann.
Weitere Informationen finden Sie in Caniuse.com, um aktuelle Supportinformationen zu erhalten.

Es ist erwähnenswert, dass die Unterstützung von Schriftarten nicht durch Feature-Abfragen getestet werden kann, da sie, wie oben erwähnt, keine CSS-Eigenschaft, sondern ein Schriftkriptor ist. In diesem GitHub -Problem finden Sie einige Diskussionen darüber, wie diese Funktion ordnungsgemäß erkannt werden kann.

Sobald festgestellt wurde, dass eine Schrift-Display nicht unterstützt wird, sind mehrere Fallback-Strategien möglich, aber dies ist der Umfang dieses Artikels. Der Artikel Ein umfassender Leitfaden für Schriftladungsstrategien von Zach Leatherman präsentiert eine umfassende Übersicht über verfügbare Lösungen.

Verwendung mit Google -Schriftarten

Sie haben vielleicht festgestellt, dass die auf der Demo -Seite verwendete Schriftart von Google -Schriftarten stammt, sie jedoch nicht auf die übliche Weise geladen wird, d. H. Verknüpfung mit dem Stylesheet, der vom Schriftartanbieter bereitgestellt wird. Stattdessen habe ich gerade die URL der in diesem Stylesheet gefundenen Schrift kopiert und diese URL in meiner benutzerdefinierten @font-face-Regel verwendet. Ich musste dies tun, weil, wie im Nutzungsabschnitt zu sehen war, in der Schriftregel an die Schriftart angegeben werden muss.

Gibt es eine bessere und mehr Google-Schriftarten? Werden Google-Schriftarten und andere Schriftringe von Drittanbietern das Schriftart-Display unterstützen?

Es gibt ein offenes Problem auf dem Google Fonts Github Repo, in dem dies diskutiert wird. Fügen Sie Ihre 1 hinzu, um Ihr Interesse an dieser Funktion zu zeigen!

Außerdem ist erwähnenswert, dass das CSS-Schriftart Modul Level 4 die Verwendung von Schriftarten als Deskriptor für @font-Feature-Werte vorschlägt direkt unter ihrer Kontrolle. Dies wird jedoch noch von keinem Benutzeragenten implementiert.

endgültige Wörter

Ich hoffe, dies gibt Ihnen einen anständigen Überblick über den Schriftschreibungsschreibungsverfahren und wie diese Funktion eine starke Zukunft für das Rendering von Schriftarten im Web hinweist.

Obwohl in diesem Artikel spezifische Anwendungsfälle für die verschiedenen durch Schriftarten implementierten Strategien erörtert wurden, veranschaulicht die Spezifikation Anwendungsfälle mit einigen klaren Beispielen, und einige der zitierten Referenzen werden dieses Thema erläutert. Zusätzlich zu den Grundlagen, die ich hier behandelt habe, müssen Sie mehr in den von mir verwiesenen Ressourcen nachsehen.

häufig gestellte Fragen (FAQs) zu CSS -Schriftart- und Web -Schriftart -Rendering

Was ist die CSS-Schriftart-Display-Eigenschaft und warum ist es wichtig? ist immer noch geladen. Diese Eigenschaft ist entscheidend, da sie die Benutzererfahrung auf einer Website erheblich beeinflusst. Wenn eine Schriftart zu lange dauert, kann dies zu einer Verzögerung bei der Darstellung des Textes führen, was zu einem Phänomen führt, das als Blitz des unsichtbaren Textes (FOIT) oder einem Blitz des nicht styierten Textes (FOUT) bekannt ist. Durch die Nutzung der Eigenschaft von Schriftarten können Entwickler dieses Verhalten steuern und die allgemeine Benutzererfahrung verbessern.

Wie funktioniert die CSS-Schriftart-Display-Eigenschaft? Bereitstellung einer Reihe von Regeln, die bestimmen, wie sich eine Schriftart verhalten sollte, während sie geladen ist und wann sie nicht geladen wird. Es akzeptiert mehrere Werte, einschließlich „Auto“, „Block“, „Swap“, „Fallback“ und „optional“. Jeder dieser Werte stellt eine andere Ladestrategie dar, die den Entwicklern die Flexibilität gibt, die zu wählen, die ihren Anforderungen am besten entspricht. Der Anzeigewert repräsentiert eine andere Strategie für Schriftarten. "Auto" lässt das Ladeverhalten bis zum Browser. "Block" gibt der Schrift einen kurzen Blockzeit und eine unendliche Tauschzeit. "Swap" gibt der Schriftart eine Blockzeit mit Null-Sekunden und eine unendliche Tauschzeit. "Fallback" gibt der Schrift eine sehr kurze Blockzeit und einen kurzen Tauschzeitraum. "Optional" gibt der Schriftart einen Blockzeitraum von Null und eine Null-Sekunden-Twap-Periode.

Wie kann ich die CSS-Schriftart-Display-Eigenschaft in meinem Code verwenden? Hier ist ein Beispiel:

@font-face {
font-familie: 'myfont'; -Display: Swap;
}
In diesem Beispiel wird die Schriftart-Display-Eigenschaft auf 'Swap' gesetzt, was bedeutet, dass der Text sofort mit einer Fallback-Schriftart angezeigt wird, wenn 'myfont' nicht verfügbar ist.

Welche Auswirkungen haben die CSS-Schriftart-Display-Immobilie auf die Leistung der Website? Durch die Steuerung der Art und Weise, wie Schriftarten während des Ladevorgangs angezeigt werden, kann dies dazu beitragen, Verzögerungen bei der Darstellung des Textes zu verhindern und so die wahrgenommene Ladegeschwindigkeit einer Website zu verbessern. Es kann auch dazu beitragen, Layoutverschiebungen zu vermeiden, die durch spätladende Schriftarten verursacht werden, was zu einer reibungsloseren Benutzererfahrung führt. Fout)?

Die CSS-Schriftart-Display-Eigenschaft befasst sich direkt mit den Problemen von Foit und Fout. Indem sie Entwicklern ermöglichen, das Schriftladungsverhalten zu steuern, kann es verhindern, dass der Text während des Ladungsprozesses unsichtbar oder unbeholfen wird. Wenn Sie beispielsweise die Eigenschaft mit Schriftarten in "Swap" einstellen, kann das Foit entfernen, indem der Text sofort mit einer Fallback-Schriftart angezeigt wird. 🎜> Einige Best Practices für die Verwendung der CSS-Schriftart-Display-Eigenschaft umfassen die Auswahl des richtigen Werts basierend auf Ihren Anforderungen und das Testen des Ladeverhaltens an verschiedenen Browsern und Netzwerkbedingungen. Es wird auch empfohlen, eine Fallback-Schriftart zu verwenden, die den Metriken der benutzerdefinierten Schriftart genau entspricht, um Layout-Verschiebungen zu minimieren.

Ja, Sie können die CSS-Schriftart-Display-Eigenschaft mit Webschriften verwenden, die auf Diensten von Drittanbietern gehostet werden. Es ist jedoch wichtig zu beachten, dass nicht alle Dienste diese Funktion unterstützen. Sie sollten die Dokumentation überprüfen oder den Dienstanbieter kontaktieren, um weitere Informationen zu erhalten. Die Anzeigeeigenschaft ist, dass sie in allen Browsern nicht vollständig unterstützt wird. Zum Beispiel unterstützen Internet Explorer und einige ältere Versionen anderer Browser diese Funktion nicht. Darüber hinaus kann der "optionale" Wert dazu führen, dass die benutzerdefinierte Schriftart in einigen Fällen vollständig übersprungen wird, was sich auf die visuelle Konsistenz Ihrer Website auswirken kann.

Wie passt die CSS-Schriftart-Display-Eigenschaft in eine umfassende Web-Performance-Strategie? Während dies dazu beitragen kann, die wahrgenommene Ladegeschwindigkeit zu verbessern und Layoutverschiebungen zu verhindern, sollte sie in Verbindung mit anderen Leistungsoptimierungstechniken verwendet werden, z. .

Das obige ist der detaillierte Inhalt vonCSS-Schriftart-Display: Die Zukunft des Schriftarts im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!