使用 font-display 优化 Web fonts 的加载

Web fonts 的使用越来越广泛,可以允许我们在页面上使用用户终端上没有安装的字体,尤其是在图标的使用上。但由于字体的加载依赖网络环境,因此可能会带来一些性能及显示问题,比如网络环境较差时,Web fonts 并不能及时的显示出来,显示效果可能是一团糟。

异常的加载效果

下面来分别看一下网络状况不好时加载中与加载完成的效果,首先看下图标的加载效果:

可以看到字体未加载成功时,后三行的图标显示成了方框,体验很不好。

然后是使用 Web fonts 的字体加载效果:

可以看到字体未加载成功时,页面中后三行的文字并没有乱码,而是呈现为后备字体,也就是浏览器会默认创建一个匿名字体,可以说效果还不算太差。

对于上面这些问题,该如何解决呢?其实已经有了解决办法,那就是使用 font-display 属性,该属性会决定 Web fonts 从下载到显示的过程中该如何呈现。

另外,在 Chrome 的最新版本上,如果对于 Web fonts 不设置 font-display 属性,浏览器会给出警告

字体显示时间轴

在使用 font-display 之前先看一下字体的加载过程,字体的加载会分为三个阶段:阻塞阶段、交换阶段及失败阶段。

  • 阻塞阶段:在这一阶段,如果字体没有下载完成,则显示为不可见的后备字体
  • 交换阶段:如果字体没有下载完成,则显示为可见的后备字体
  • 失败阶段:如果字体仍然没有下载完成,则标记为字体加载失败,使用后备字体呈现内容。

font-display 属性

对于 font-display 属性,一共有五个值,默认为 auto,其次为 blockswapfallbackoptional

  • auto: 字体展示策略跟浏览器保持一致
  • block: 为字体提供一个较短的阻塞时间和无限大的交换周期,如果字体未加载完成,则会以隐形的后备字体呈现,字体加载完成后立即切换字体,这个用在图标上就比较合适,防止出现乱码,另外图标最好是使用 SVG 的格式,这样就能避免这些问题了。
  • swap: 阻塞时间为 0,交换周期无限大,如果字体未加载完成,则会以可见的后备字体呈现,字体加载完成后立即切换字体。
  • fallback: 为字体提供一个较短的阻塞周期和一个较短的交换周期,如果字体未加载完成,则会以可见的后备字体呈现,字体加载完成后立即切换字体,如果超时,则会一直以后备字体呈现,比如 Logo、正文或者是一些重要的内容,用这个就比较合适。
  • optional: 阻塞时间较小,交换周期为0,一般会由浏览器决定是否下载字体,在比较弱的网络环境及 Web fonts 的显示并不是特别重要时将会比较有用。

下面是一个使用示例:

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

Ok,关于 font-display 就介绍这么多,如果还没加这个属性的话,赶快用起来吧。

本文中的示例代码:图标示例代码文本示例代码

相关资料