web font的生命周期

在讨论什么是font-display之前,让我们先讨论一下web font的生命周期。

the-lifetime-of-a-web-font

在期间,浏览器将以不可见的字体呈现文本。 这就是为什么在很多使用web font的网站上,在页面的第一次加载期间,您不会看到任何文字或更糟的幻影下划线的原因。

在swap期间,浏览器将以fallback字体呈现文本(在该图中的示例中,这将是默认的“serif”字体)。

failure期意味着未找到字体,在这种情况下,浏览器将使用fallback字体呈现文本,如上所述。

使用新的font-display属性,您可以控制每个周期的长度,以及其中一个周期失败时会发生的情况。 有4个不同的值:blockswapfallbackoptional。 还有auto,通常最终与block相同。 所有现代浏览器(不包括IE)都支持这些值,但是请仔细检查兼容性表以获取最新的信息!

font-display用于@font-face内部,

@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');
}

Google字体现在允许您使用display查询参数控制字体加载:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=optional" rel="stylesheet">

font-display参数

font-display接受以下值:

  • auto:默认值。使用用​​户代理使用的任何字体显示策略。当前,大多数浏览器的默认策略都类似于block。
  • block:赋予字体较短的阻止时间(大多数情况下建议为3s)和无限的swap时间。 换句话说,如果未加载字体,浏览器将首先绘制“不可见”文本,但是在加载后立即swap字体。 为此,浏览器将创建一个匿名字体,其字体与所选字体相似,但所有字形均不包含“墨水”。 仅当需要使用特定字体呈现文本才能使页面可用时,才应使用此值。
  • swap:给font-face提供零秒的block周期和无限的swap周期。 这意味着如果未加载字体,浏览器会立即以备用字体绘制文本,但是在加载后立即swap字体。 与block相似,仅当以特定字体呈现的文本对页面很重要时才应使用此值,但是以任何字体呈现仍会得到正确的消息。 Logo文字是进行swap的理想选择,因为使用合理的fallback显示方式来显示公司名称会传达信息,但最终您将使用正式字体。
  • fallback:使font-face的block周期非常小(大多数情况下建议100ms或更短),而swap周期则很短(在大多数情况下建议三秒)。换句话说,如果未加载字体,字体会首先呈现fallback效果,但是一旦加载,字体就会被swap。但是,如果经过的时间过多,则会在整个页面的剩余生命周期中使用fallback。fallback是诸如正文文本之类的不错的选择,在这种情况下,您希望用户尽快开始阅读,并且不想在加载新字体时四处移动文本来打扰他们的体验。
  • optional:为字体提供了非常小的block周期(在大多数情况下,建议为100ms或更短)和零秒swap周期。与fallback类似,当下载字体更像是“不错”但对体验并不重要时,这是一个不错的选择。可选值由浏览器决定是否启动字体下载,它可以选择不执行字体下载,也可以将字体下载作为低优先级,这取决于它认为最适合用户的方式。在用户连接较弱并且拉下字体可能不是资源的最佳使用的情况下,这可能是有益的。

放到一起,看起来像这样:

font-display

一个简单的示例

所以我该怎么做?

这在很大程度上取决于您使用Web字体的方式,以及使用fallback字体呈现文本是否有意义。 例如,如果要在网站上呈现主体文本,则应使用font-display:optional。 在实现它的浏览器上(2019年更新本文时所有现代浏览器),体验会好得多:您的用户将获得快速的内容,并且如果Web字体下载花费的时间太长,他们将不会获得页面在阅读您的文章时进行重排。

如果您使用web font作为图标,则没有可以使用的fallback字体可以渲染这些icons(除非您使用emoji或其他东西),因此唯一的选择是使用font-display:block完全阻止字体,直到字体准备好为止。

Controlling Font Performance with font-display

Font-display

Related Posts