265手游,让游戏更精彩!

使用 font-display 提升使用自定义字体(font-face)时的性能与用户体验

编者按:本文由文蔺在众成翻译平台上翻译。
译文原文:font-display 的使用
英文原文:


进行性能优化时,决定 Web Font 的加载行为是一项技术活。@font-face规则中新增了一个font-display声明,开发者可以根据 Web Font 的加载时间来决定如何渲染或降级处理。

字体渲染差异

有了 Web Font,开发者可以在项目中加入丰富的排版功能。但需要权衡的是,下载字体会耗费一些时间。而下载时间难免会受到网络状况的影响,继而干扰用户体验。说实话,如果连页面展示都费劲,谁还会在乎你用多炫的字体呢。

字体下载可能比较慢,为了减轻风险,大多数浏览器都采用了超时处理。一旦超时,就使用后备字体。理想很美好,现实很无奈,浏览器在实现上各有自己的一套。

  • Chrome 和 Firefox 超时时间为 3 秒,超时后使用后备字体。若字体最终勉强加载成功,它将替换后备字体,重新渲染文本。
  • IE 浏览器超时时间为 0 秒,也就是说,会立即渲染文本。若所请求的字体尚不可用,则使用后备字体。一旦请求字体可用,将重新渲染文本。
  • Safari 没有超时行为(或者说,至少在基准网络超时之前什么也没干)。

更糟糕的是,这些规则对应用造成的影响,在很大程度上不受开发者控制。关注性能的开发者也许更乐意使用后备字体,使网页内容更快地展现,当更美观的 Web Font 下载完成后再加以使用。使用 Font Loading API 之类的工具,可以覆盖浏览器的某些默认行为,提升性能。但这将引入额外的 JavaScript 代码 —— 要么把代码内联到页面中;要么请求外部文件,而这可能带来额外的 HTTP 延时。

CSS 工作组为此提出了新方案:为@font-face增加新的font-display声明,用于控制字体下载完成之前的渲染行为。

字体下载时间轴

与一些浏览器目前使用的字体超时行为类似,font-display将字体下载过程划分为三个阶段。

1. 首先是字体阻塞阶段(font block period)。在此期间,如果字体未完成加载,则尝试使用它的任何元素,必须以不可见的后备字体形式呈现;否则正常使用该字体。

2. 紧接着字体阻塞阶段的是字体交换阶段(font swap period)。在此期间,如果字体未完成加载,则尝试使用它的任何元素,必须使用后备字体进行渲染;否则正常使用该字体。

3. 紧接着是字体故障阶段(font failure period)。此时若字体未完成加载,则将其标记为下载失败,并使用常规后备字体;否则正常使用该字体。

理解以上三个阶段,根据字体是否下载成功、何时下载完成等情况,就可以可以使用font-display来决定如何渲染字体了。

使用哪种 font-display 值?

要使用font-display,请在@font-face规则中添加代码:

 
  
  
    

游戏排行

热门信息

热门标签