css 渲染字体 vue_CSS字体显示：网络上字体渲染的未来

蔚落 2022-12-03 09:13 306阅读 0赞

css 渲染字体 vue

One of the downsides of using web fonts is that if a font is not available on a user’s device, it must be downloaded. This means that before the font becomes available the browser has to decide how to handle the display of any block of text that uses that font. And it needs to do so in a way that doesn’t significantly impact the user experience and perceived performance.

使用网络字体的缺点之一是，如果用户的设备上没有字体，则必须将其下载。 这意味着在字体可用之前，浏览器必须决定如何处理使用该字体的任何文本块的显示。 它需要以一种不会显着影响用户体验和感知性能的方式来这样做。

In the course of time, browsers have adopted several [strategies][] to mitigate this problem. But they do this in [different ways][] and out of the control of developers, who have had to [devise][] several techniques and workarounds to overcome these issues.

随着时间的流逝，浏览器已经采用了几种[策略][strategies]来缓解此问题。 但是他们以[不同的方式][different ways]执行此操作，并且不受开发人员的控制，开发人员不得不[设计出][devise]几种技术和变通办法来克服这些问题。

![Using Chrome DevTools to test font -display][]

Enter the [font-display descriptor][] for the `@font-face` at-rule. This CSS feature introduces a way to standardize these behaviors and provide more control to developers.

输入`@font-face`规则的[字体显示描述符][font-display descriptor] 。 此CSS功能引入了一种标准化这些行为并向开发人员提供更多控制的方法。

## 使用`font-display` **(**Using `font-display`**)** ##

Before looking in detail at the various features offered by `font-display`, let’s briefly consider how you might use the feature in your CSS.

在详细查看`font-display`提供的各种功能之前，让我们简要考虑一下如何在CSS中使用该功能。

First of all, `font-display` is not a CSS property but, as mentioned in the intro, it is a [descriptor][] for the `@font-face` at-rule. This means that it must be used inside a `@font-face` rule, as showed in the following code:

首先， `font-display`不是CSS属性，但是，如简介中所述，它是`@font-face` at-rule的[描述符][descriptor] 。 这意味着必须在`@font-face`规则内使用它，如以下代码所示：

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

In this snippet I’m defining a `swap` value for the font `Saira Condensed`.

在此代码段中，我为`Saira Condensed`字体定义了`swap`值。

The keywords for all the available values are:

所有可用值的关键字为：

*  `auto`
    
    `auto`
 *  `block`
    
    `block`
 *  `swap`
    
    `swap`
 *  `fallback`
    
    `fallback`
 *  `optional`
    
    `optional`

The initial value for `font-display` is `auto`.

`font-display`的初始值为`auto` 。

In later sections I’ll go over each of these values in detail. But first, let’s look at the time period that the browser uses to determine the font to be rendered. When discussing each of the values, I’ll explain the different aspects of the timeline and how these behave for each value.

在后面的部分中，我将详细介绍每个值。 但是首先，让我们看一下浏览器用来确定要呈现的字体的时间段。 在讨论每个值时，我将说明时间轴的不同方面以及它们对于每个值的行为。

## `font-display`时间轴 **(**The `font-display` Timeline**)** ##

At the core of this feature is the concept of the **font-display timeline**. The font loading time, starting from its request and ending with its successful loading or failure, can be divided into three consecutive periods that dictate how a browser should render the text. These three periods are as follows:

此功能的核心是**字体显示时间轴**的概念。 字体加载时间(从请求开始到成功加载或失败结束)可以分为三个连续的时间段，这些时间段决定了浏览器应如何呈现文本。 这三个时期如下：

*  **The block period**. During this period, the browser renders the text with an *invisible* fallback font. If the requested font successfully loads, the text is re-rendered with that requested font. The invisible fallback font acts as a blank placeholder for the text. This reduces layout shifting when the re-rendering is performed.
    
    **封锁期** 。 在此期间，浏览器使用*不可见的*后备字体呈现文本。 如果成功加载了请求的字体，则将使用该请求的字体重新渲染文本。 不可见的后备字体用作文本的空白占位符。 这样可以减少执行重新渲染时的布局偏移。
 *  **The swap period**. If the desired font is not yet available, the fallback font is used, but this time the text is visible. Again, if the loading font comes in, it is used.
    
    **交换期** 。 如果所需的字体尚不可用，则使用后备字体，但是这次文本是可见的。 同样，如果装入字体出现，则使用它。
 *  **The failure period**. If the font does not become available, the browser doesn’t wait for it, and the text will be displayed with the fallback font on the duration of the current page visit. Note that this doesn’t necessarily mean that the font loading is aborted; instead, the browser can decide to continue it, so that the font will be ready for use on successive page visits by the same user.
    
    **失效期** 。 如果该字体不可用，则浏览器不会等待它，并且在当前页面访问期间，将使用后备字体显示文本。 请注意，这并不一定意味着字体加载会中止。 取而代之的是，浏览器可以决定继续使用该字体，以便该字体可供同一用户在连续的页面访问中使用。

Adjusting the duration of such periods allows you to configure a custom text rendering strategy. In particular, these durations can collapse to zero or extend to infinity, as I’ll show you in the following sections.

调整这些时间段的持续时间可以使您配置自定义文本呈现策略。 特别是，这些持续时间可以缩小为零或扩展为无穷大，如以下各节所示。

But these durations cannot be explicitly assigned by the developer. This possibility was examined in an early stage of the specification, but [was dropped][]. Instead, a set of predefined keyword values that can handle the majority of use cases are provided, as outlined in the previous section.

但是这些持续时间不能由开发人员明确分配。 在本规范的早期阶段就对这种可能性进行了检查，但是这种可能性[被放弃了][was dropped] 。 而是提供了一组可以处理大多数用例的预定义关键字值，如上一节所述。

Let’s look at how each of these keywords manages the font loading and display process.

让我们看一下这些关键字中的每一个如何管理字体加载和显示过程。

## `font-display: auto` **(**`font-display: auto`**)** ##

This value tells the browser to adopt the default font display behavior chosen by the browser. Often this strategy is similar to the next value, `block`.

该值告诉浏览器采用浏览器选择的默认字体显示行为。 通常，此策略类似于下一个值`block` 。

## `font-display: block` **(**`font-display: block`**)** ##

With this value, after a short block period (the specification recommends a duration of three seconds), the swap period extends to infinity. This means that in this circumstance the failure period is absent.

使用此值，在较短的块周期(规范建议的持续时间为三秒)后，交换周期将扩展为无穷大。 这意味着在这种情况下将不存在故障时段。

While the browser briefly waits for the requested font, it renders the text with the invisible fallback font; after that, if the font is not yet available, the fallback font is made visible; and whenever the download completes, the browser re-renders the text with the wanted font.

当浏览器短暂等待所请求的字体时，它将使用不可见的后备字体呈现文本。 之后，如果该字体尚不可用，则使后备字体可见。 下载完成后，浏览器会重新渲染带有所需字体的文本。

You can watch this behavior in the following video, which uses [a simple test page][] that incorporates a specific web font for its heading:

您可以在以下视频中观看此行为，该视频使用[一个简单的测试页面][a simple test page] ，该[页面的标题][a simple test page]中包含特定的网络字体：

At the beginning of page load, the heading is invisible but it is there, in the DOM. After about three seconds, if the font is not yet available, the text is made visible with the fallback font. In the video demo, I’m mimicking poor network conditions using Chrome DevTools’ [network throttling][] feature. Finally, when the font manages to download, the heading is re-rendered with it.

在页面加载开始时，标题是不可见的，但在DOM中已经存在。 大约三秒钟后，如果该字体尚不可用，则使用后备字体使文本可见。 在视频演示中，我使用Chrome DevTools的[网络限制][network throttling]功能来模拟恶劣的网络条件。 最后，当字体成功下载后，标题随之重新呈现。

## `font-display: swap` **(**`font-display: swap`**)** ##

With this value, the block period collapses to 0 and the swap period extends to infinity. Therefore, here too, the failure period is missing.

使用此值，块周期变为0，交换周期延伸至无穷大。 因此，这里也缺少故障时段。

In other words, the browser doesn’t wait for the font but instead immediately renders the text with the fallback font; then, whenever the font is available, the text is re-rendered with it.

换句话说，浏览器不等待字体，而是立即使用后备字体呈现文本。 然后，只要有可用的字体，就会使用该字体重新渲染文本。

Let’s verify this:

让我们验证一下：

## `font-display: fallback` **(**`font-display: fallback`**)** ##

This is the first value that incorporates the failure period. After a very short block period (100 ms is recommended), the swap period now has a short duration (3s is recommended). As a result, if the requested font is not ready at the end of this period, the text will display using the fallback font for the duration of the page visit. This avoids disturbing the page visitor with a late layout shift that could be jarring to the user experience.

这是包含失效时间的第一个值。 经过很短的块周期(建议100 ms)之后，交换周期现在具有较短的持续时间(建议3s)。 因此，如果在此期间结束时请求的字体尚未准备好，则在页面访问期间，将使用后备字体显示文本。 这样可以避免由于后期布局偏移而对页面访问者造成干扰，这可能会破坏用户体验。

In this first video below, the font loads after more than six seconds, thus it is never swapped in:

在下面的第一个视频中，字体加载超过六秒钟，因此它永远不会被替换：

In the next video, the font loads faster, before the timeout of the swap period kicks in, so the font is used as expected:

在下一个视频中，在交换期超时开始之前，字体加载速度更快，因此按预期使用了字体：

## `font-display: optional` **(**`font-display: optional`**)** ##

When I first read the specification, I found the names assigned to the font display strategies not so clear. This is even pointed out in the specification itself, which [suggests][] future versions of the spec use names that better illustrate the intended use of each strategy, proposing the following alternatives:

当我第一次阅读规范时，发现分配给字体显示策略的名称不是很清楚。 规范本身甚至指出了这一点，该规范[建议][suggests]规范的未来版本使用更好地说明每种策略的预期用途的名称，并提出以下替代方案：

*  `requires` for `block`
    
    `requires` `block`
 *  `important` for `swap`
    
    对于`swap` `important`
 *  `preferable` for `fallback`
    
    `preferable`为`fallback`

But the `optional` value is expected to remain unchanged. Indeed this value nicely captures the essence of the behavior it triggers. In this case, the font is considered optional for the rendering of the page, essentially telling the browser: *if the font is already available, use it, otherwise it doesn’t matter, go ahead with the fallback font; the font can be ready for use on future page visits*.

但是， `optional`值预计将保持不变。 实际上，该值很好地捕捉了它触发的行为的本质。 在这种情况下，该字体被认为是呈现页面的可选字体，从本质上告诉浏览器： *如果该字体已经可用，请使用它，否则不要紧，继续使用备用字体；* *该字体可以准备在将来的页面访问中使用* 。

With this value, the font display timeline has a short block period (again, the spec recommends a 100 ms time interval) and a zero-duration swap period. Hence the failure period immediately follows the block period, meaning that if the font is not readily available, it will not be used for the duration of the page visit. But the font could eventually be fully downloaded in the background and so it would become available for immediate rendering on future page loads.

使用此值，字体显示时间轴具有较短的块周期(再次，规范建议使用100 ms时间间隔)和零持续时间交换周期。 因此，失败时间段紧跟在阻止时间段之后，这意味着如果字体不容易获得，则在页面访问期间不会使用它。 但是该字体最终可能会在后台完全下载，因此可以在以后的页面加载中立即呈现。

But I should point out here that, especially under poor network conditions, the user agent is free to abort or even to not begin the font download. This is so as to not unnecessarily impact the quality of the network connection. Therefore the site is still usable but the font won’t be immediately available on future page loads.

但我要在此指出，尤其是在网络条件差的情况下，用户代理可以随意中止甚至不开始字体下载。 这样可以避免不必要地影响网络连接的质量。 因此，该站点仍然可用，但字体不会在以后的页面加载中立即可用。

In the video below, the test page is loaded without throttling the network. The font is downloaded quickly, but only after the short block period, so the text is displayed with the fallback font for all duration of the visit.

在下面的视频中，加载测试页时不会限制网络。 字体下载速度很快，但仅在较短的阻止时间之后下载，因此在访问的所有持续时间内，文本均使用后备字体显示。

In the next video, the page is reloaded under the same network conditions, but this time with the cache enabled, to simulate a second visit:

在下一个视频中，在相同的网络条件下重新加载页面，但是这次启用了缓存，以模拟第二次访问：

And there you have it, the heading now renders with the desired web font.

现在，标题已显示为所需的Web字体。

Before moving on, note the extremely short duration of around 100 ms recommended for the `block` period when using the `fallback` and `optional` values. This is to allow a brief period for a quick-loading font (or one loading from the cache) to display before using the fallback font, thus avoiding a “flash of unstyled text”, or FOUT.

在继续进行操作之前，请注意，使用`fallback`和`optional`值时，建议在`block`周期内建议使用极短的持续时间(约100 ms)。 这是为了在使用后备字体之前让显示快速加载的字体(或从缓存加载的字体)的短暂时间显示出来，从而避免出现“未样式化文本的闪烁”或FOUT。

I actually wondered why the block period collapses to zero when using `font-display: swap`, instead of using the same short interval as `optional`. It turns out, [there is an open issue][] in the spec’s GitHub repo to make ‘swap’ use the same “tiny block period” as others.

我实际上想知道为什么在使用`font-display: swap` ，块周期会崩溃为零，而不是使用与`optional`相同的短间隔。 事实证明，规范的GitHub回购中[存在一个未解决的问题][there is an open issue] ，即要使“交换”使用与其他交换相同的“小块期间”。

## 关于后备字体 **(**About the Fallback Font**)** ##

In the above discussion, several times I mentioned the fallback font. But where does this come from?

在上面的讨论中，我多次提到后备字体。 但是，这是从哪里来的呢？

The fallback font is the first available font present in the font stack defined using the `font-family` property on the element in question.

后备字体是使用有关元素上的`font-family`属性定义的字体堆栈中存在的第一个可用字体。

For example, on the test page, the `font-family` value for the heading is:

例如，在测试页上，标题的`font-family`值为：

h1 {
      font-family: 'Saira Condensed', Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

This can be verified (see the video above for `optional`), for example, on a Windows machine, which uses Arial as the rendered font.

例如，可以在使用Arial作为呈现字体的Windows机器上对此进行验证(请参阅上面的视频以了解`optional` )。

## 支持 **(**Support**)** ##

At the time of writing support for the `font-display` descriptor looks as follows:

在撰写本文时，对`font-display`描述符的支持如下所示：

*  Chrome has supported it since [version 60][]
    
    Chrome自[版本60][version 60]起已支持它
 *  Opera has supported it since version 47
    
    Opera从47版开始就支持它
 *  [It’s in development][It_s in development] for Firefox and has been available behind a flag since version 46.
    
    [它是][It_s in development]针对Firefox [的开发][It_s in development]中的版本，自46版本起就已被使用。
 *  Regarding Safari, the WebKit platform status reports that it is [in development][]
    
    关于Safari，WebKit平台状态报告它正在[开发中][in development]
 *  There is [no indication yet][] that Microsoft Edge will support it anytime soon. There is a [ticket][] on the Microsoft Edge Developer Feedback site where it is possible to vote for the implementation of this feature.
    
    [尚无迹象][no indication yet]表明Microsoft Edge会很快支持它。 Microsoft Edge开发人员反馈网站上有一张[票证][ticket] ，您可以在其中为实现此功能投票。

Please refer to [caniuse.com][] for up-to-date support information.

请访问[caniuse.com][]获取最新的支持信息。

It is worth noting that `font-display` support cannot be tested by feature queries, because, as mentioned above, it is not a CSS property but a font descriptor. [In this GitHub issue][] you’ll find some discussion on how to properly detect this feature.

值得注意的是，无法通过功能查询测试`font-display`支持，因为如上所述，它不是CSS属性，而是字体描述符。 [在此GitHub问题中，][In this GitHub issue]您将找到有关如何正确检测此功能的一些讨论。

Once it has been detected that `font-display` is not supported, several fallback strategies are possible, but this is out the scope of this article. The article [A Comprehensive Guide to Font Loading Strategies][devise] by Zach Leatherman presents an exhaustive survey of available solutions.

一旦检测到不支持`font-display` ，便可以使用几种后备策略，但这不在本文的讨论范围之内。 Zach Leatherman撰写[的《字体加载策略综合指南》对][devise]可用解决方案进行了详尽的调查。

## Google字体的用法 **(**Usage with Google Fonts**)** ##

You may have noticed that the font used in the demo page is from Google Fonts, but it is not loaded in the usual way, i.e., linking to the stylesheet provided by the font provider. Instead, I just copied the URL of the font found in that stylesheet and used that URL in my custom `@font-face` rule. I had to do this because, as seen in the usage section, `font-display` must be specified inside the `font-face` rule.

您可能已经注意到，演示页面中使用的字体来自Google字体，但并未以通常的方式加载，即链接到字体提供者提供的样式表。 相反，我只是复制了在该样式表中找到的字体的URL，并在我的自定义`@font-face`规则中使用了该URL。 我必须这样做，因为如用法部分所示，必须在`font-face`规则内指定`font-display` 。

Is there a better and more Google Fonts-friendly way? Are Google Fonts and other third-party font foundries going to support `font-display`?

有没有更好，更友好的Google字体友好方法？ Google字体和其他第三方字体铸造厂是否将支持`font-display` ？

There is [an open issue][] on the Google Fonts GitHub repo where this is discussed. Add your +1 to show your interest in this feature!

Google Fonts GitHub存储库上有[一个未解决的问题][an open issue] ，我们对此进行了讨论。 添加您的+1，以显示您对此功能的兴趣！

Also, it’s worth mentioning that the [CSS Fonts Module Level 4][] proposes the usage of `font-display` as a descriptor for [@font-feature-values][font-feature-values], to enable developers to set a display policy for `@font-face` rules that are not directly under their control. But this is not yet implemented by any user agent.

另外，值得一提的是， [CSS字体模块第4级][CSS Fonts Module Level 4]建议使用`font-display`作为[@ font-feature-values][font-feature-values]的描述符，以使开发人员能够为不在其直接下的`@font-face`规则设置显示策略。控制。 但这尚未由任何用户代理实现。

## 最后的话 **(**Final Words**)** ##

I hope this gives you a decent overview of the `font-display` descriptor and how this feature foreshadows a strong future for font rendering on the web.

我希望这能给您有关`font-display`描述符的一个不错的概述，以及此功能如何为网络上的字体渲染预示美好的未来。

Although this article didn’t discuss specific use cases for the different strategies implemented by `font-display`, the specification illustrates use cases with some clear examples, and several of the cited references elaborate on this topic. So in addition to the basics I’ve covered here, you’ll have more to look over in the resources I’ve referenced.

尽管本文没有讨论`font-display`实现的不同策略的特定用例，但该规范通过一些清晰的示例说明了用例，其中一些引用的参考文献对此主题进行了详细说明。 因此，除了我在这里介绍的基础知识之外，您还可以在我参考的资源中进行更多的研究。

> 翻译自: [https://www.sitepoint.com/css-font-display-future-font-rendering-web/][https_www.sitepoint.com_css-font-display-future-font-rendering-web]

css 渲染字体 vue

[strategies]: https://webkit.org/blog/6643/improved-font-loading/
[different ways]: https://tabatkins.github.io/specs/css-font-display/#intro
[devise]: https://www.zachleat.com/web/comprehensive-webfonts/
[Using Chrome DevTools to test font -display]: /images/20221123/a83b53ed95964c78a28638fbe2d9d1de.png
[font-display descriptor]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
[descriptor]: https://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions
[was dropped]: https://plus.google.com/+IlyaGrigorik/posts/a3Yn3jB4wjA
[a simple test page]: https://codepen.io/SitePoint/pen/mBOVKN
[network throttling]: https://developers.google.com/web/tools/chrome-devtools/network-performance/network-conditions
[suggests]: https://tabatkins.github.io/specs/css-font-display/#issue-d2da4906
[there is an open issue]: https://github.com/tabatkins/specs/issues/53
[version 60]: https://www.chromestatus.com/feature/4799947908055040
[It_s in development]: https://platform-status.mozilla.org/#css-font-display
[in development]: https://webkit.org/status/#specification-css-font-display
[no indication yet]: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=font
[ticket]: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/14653365-prevent-fout-and-control-font-loading-with-css-fon
[caniuse.com]: http://caniuse.com/#feat=css-font-rendering-controls
[In this GitHub issue]: https://github.com/bramstein/fontfaceobserver/issues/62#issuecomment-234790586
[an open issue]: https://github.com/google/fonts/issues/358
[CSS Fonts Module Level 4]: https://www.w3.org/TR/css-fonts-4/
[font-feature-values]: https://www.w3.org/TR/css-fonts-4/#font-display-font-feature-values
[https_www.sitepoint.com_css-font-display-future-font-rendering-web]: https://www.sitepoint.com/css-font-display-future-font-rendering-web/