使用 font-display 控制字体性能

确定网页字体在加载时的行为是一项重要的性能优化技术。借助 @font-face 的新 font-display 描述符,开发者可以根据其加载时长来决定其网页字体的渲染(或回退)方式。

目前的字体渲染差异

网页字体让开发者能够将丰富的排版功能整合到他们的项目中,但如果用户还没有某种字体,浏览器就必须花一些时间进行下载。由于网络可能不稳定,因此该下载时间可能会对用户体验产生不利影响。毕竟,如果显示文本需要很长时间,没人会在意它有多好看!

为了降低字体下载速度缓慢的部分风险,大多数浏览器会实现一个超时,超出该超时限制将会使用后备字体。这种技术很有用,但可惜的是,浏览器在实际实现方面有所不同。

Browser 超时 后备操作 交换
Chrome 35 及更高版本 3 秒
Opera 3 秒
Firefox 3 秒
Internet Explorer 0 秒
Safari 无超时 不适用 不适用
  • Chrome 和 Firefox 的超时时间为 3 秒,之后文本会以回退字体显示。如果成功下载字体,那么最终会发生交换,并使用预期字体重新渲染文本。
  • Internet Explorer 的超时时间为 0 秒,这会导致文本立即呈现。如果请求的字体尚不可用,系统会使用回退机制,并在请求的字体变为可用状态后重新渲染文本。
  • Safari 没有任何超时行为(或者至少没有任何超出基准网络超时限制的行为)。

更糟糕的是,在决定这些规则将如何影响其应用方面,开发者的控制权有限。注重性能的开发者可能更希望获得使用回退字体的更快初始体验,并且仅在后续访问中才有机会下载更好的网页字体。使用 Font Loading API 等工具可以替换某些默认浏览器行为并提升性能,但代价是需要编写大量 JavaScript,而这些 JavaScript 随后必须内嵌到页面中或从外部文件中请求,从而导致额外的 HTTP 延迟。

为了帮助解决此问题,CSS 工作组提出了一个新的 @font-face 描述符 font-display,以及一个用于控制可下载字体在完全加载之前如何呈现的相应属性。

字体下载时间表

与某些浏览器目前实现的现有字体超时行为类似,font-display 将字体下载的生命周期分为三个主要周期。

  1. 第一个时间段是字体屏蔽期。在此期间,如果字体未加载,则任何尝试使用该字体的元素都必须改用不可见的回退字体来渲染。如果字体在阻止期间成功加载,则正常使用字体。
  2. 字体交换期会在字体屏蔽期结束后立即出现。在此期间,如果字体未加载,则任何尝试使用该字体的元素都必须改用回退字体来渲染。如果字体在交换期内成功加载,则正常使用字体。
  3. 字体失败期紧跟在字体交换期之后。如果字体在此期间开始时尚未加载,则会被标记为加载失败,从而导致正常字体回退。否则,正常使用字体。

了解这些时间段后,您就可以使用 font-display 根据是否或下载时间来决定如何渲染字体。

哪种字体显示方式适合您?

如需使用 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');
}

font-display 目前支持以下范围的值 auto | block | swap | fallback | optional

自动出价

auto:使用用户代理使用的任何字体显示策略。大多数浏览器目前都有类似于 block 的默认策略。

阻挡

block 会为字体指定较短的阻止期(在大多数情况下,建议使用 3 秒)和无限的交换期。换言之,如果未加载字体,浏览器会先绘制“不可见”的文本,但在字体加载后立即交换字体。为此,浏览器会创建一个匿名字体,其指标与所选字体类似,但所有字形都不包含“墨水”。只有在需要以特定字体呈现文本以使页面可用时,才应使用此值。

交换空间

swap 阶段为字体指定零秒的阻止期,以及无限的交换期。 这意味着,如果未加载字体,浏览器会立即使用回退字体来绘制文本,但在字体加载后立即交换字体。与 block 类似,仅当以特定字体呈现文本对网页而言非常重要,但以任何字体呈现时,系统才应使用此值。徽标文字非常适合“交换”,因为使用合理的回退机制显示公司名称即可传达信息,但最终会使用官方字体。

后备

fallback 为字体提供了极短的阻止期(在大多数情况下,建议不超过 100 毫秒)和较短的交换期(在大多数情况下,建议为 3 秒)。换言之,字体未加载时,首先会使用回退字体来渲染字体,但在字体加载后立即交换字体。不过,如果经过的时间太长,后备广告会在网页的剩余生命周期中使用。后备广告非常适合正文等的内容,例如您希望用户尽快开始阅读,而又不想因为新字体加载而移动文本来干扰用户体验。

可选

可选:为字体指定极短的阻止期(在大多数情况下,建议值为 100 毫秒或更短)和零秒的交换期。与回退类似,如果下载字体更“锦上添花”,但对体验而言并不是非常重要,那么该方法便是一个不错的选择。可选值让浏览器决定是否启动字体下载;根据其认为对用户而言最合适,它可能会选择不下载,或将其作为低优先级执行。如果用户的网络连接信号较弱,而下拉字体可能不是资源的最佳利用方式,那么这种做法会非常有益。

浏览器支持

在桌面版 Chrome 49 中,font-display 目前位于实验性网络平台功能标志后面,且在 Android 版 Opera 和 Opera 中均有提供。

演示

请参阅示例,试用 font-display。对于注重性能的开发者来说,工具带中会成为另一个有用的工具!