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.
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:
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.
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:
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.
Dieser Wert fordert den Browser an, das vom Browser ausgewählte Standard -Schriftverhalten zu übernehmen. Oft ähnelt diese Strategie dem nächsten Wert, 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: SwapMit 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:
In diesem ersten Video unten wird die Schrift nach mehr als sechs Sekunden geladen, daher wird es nie in:
ausgetauscht
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:
, 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
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>Support
Chrome hat es seit Version 60
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
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.
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.
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.
@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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
