阅读 851

【前端性能优化指南】5.4 - 字体的优化

字体

🔝 页面静态资源 | 🔙 上一站 - 图片

有些时候,内置的字体并不能满足我们的需求,如果我们希望使用一些更有设计性的字体,我们一般会使用 @font-face 来加载字体文件:

@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
}
复制代码

然而这种方式的一大问题在于,在字体加载的期间,浏览器页面是默认不展示文本内容的。即我们常说的 FOIT (Flash of Invisible Text)。在现代浏览器中,FOIT 持续至多 3 秒,会带来糟糕的用户体验。所以在字体这部分的性能优化中,主要关注点在于如何平滑的加载字体。下面有一些解决方案。

1. 字体裁剪

关于字体的性能问题,很多时候来源于字体文件太大,加载耗时较长。因此,一种处理该问题的方式就是进行字体裁剪,从而为要加载的字体文件进行“瘦身”。由于一个字体库中可能会包含很多字(尤其是在中文的场景下),但是并非每个字都会使用到,因此可以将不需要使用到的字体剔除。

例如,对于只需要使用数字的场景,就可以将其他无用的字都剔除,只留下数字和一些必要的标点。关于字体裁剪的工具,网上有很多,大家可以自行选择。

2. font-display

你可以在 @font-face 中设置 font-display: swap,他可以让 FOIT 的默认行为变为 FOUT (Flash of Unstyled Text),即先会使用默认字体样式展示文本,字体加载完毕后再将文本的字体样式进行替换。

@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
    font-display: swap;
}
复制代码

font-display 的取值包括 auto|block|swap|fallback|optional,这里详细介绍了各种值的使用场景[1]。目前(2021.6.5)该属性的兼容性应该也勉强够用

3. 内联字体

我们在上一节介绍过,可以使用 base64 将图片“内联”到页面中。同样的,字体也可以使用这种方式,这样就避免异步加载字体时的 FOIT 或 FOUT。我们可以将字体文件转为 base64 的字符串,设置到 @font-face 里的 src 属性上:

@font-face {
    font-family: 'Samplefont';
    src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAHyoABMAAAAA4XQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABG…') format('woff2');
}
复制代码

但这种方式的局限性在于,在一个 @font-face 中只能加载加载一种字体类型。同时,与使用内联图片一样,这也会将本可以并行请求的数据量变为串行。

4. 使用 CSS Font Loading API

CSS Font Loading API 是浏览器提供的,可以用来自定义控制字体加载的 API。这样你就可以在 JavaScript 中进行字体的加载,等加载完成后,再将需要应用新字体的元素设置为对应的样式,例如添加一个对应的 className。这里介绍了如何使用 CSS Font Loading API[2]

不过目前(2021.6.5) CSS Font Loading API 也可能又兼容性问题。同时,由于一些困难也无法实现一个完美的 polyfill。因此如果想要使用类似的能力,可以考虑 Font Face Observer这个库。基本的使用方式如下:

const font = new FontFaceObserver('Samplefont');

font.load(null, 5000).then(
    () => document.documentElement.classList.add('loaded'),
    () => console.log('Font is not available')
);
复制代码
@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
}

body {
    font-family: sans-serif;
}

.loaded h1 {
    font-family: Samplefont, sans-serif;
    font-weight: 700;
}
复制代码

5. FOFT

在需要加载同一字体的粗体、斜体时,FOFT (Flash of Faux Text) 方法会非常有效。

首先你需要了解的是,对于一种字体,它的斜体与粗体是有专门的字符集的;与此同时,如果你指定了某种字体的粗体,但浏览器没有加载,那么你可以使用 font-synthesis 属性来让浏览器帮你模拟。而当实际的粗体或斜体加载完毕后,再使用实际的字体集。

具体实践起会借助上面提到的 CSS Font Loading API 或者 Font Face Observer,实现当字体加载完毕后的样式修改。


了解完字体的优化措施你会发现,它们主要集中于 如何通过加载策略来降低甚至消除 FOIT。当然上面提到的这些策略与技术你可以组合使用,以达到所需的优化效果。

如果还想了解更多关于字体加载的问题,可以看看这篇文章里总结的各类加载策略[3],它还随文提供了相应的代码示例。

image.png

关于字体的性能优化就到这了,下面我们会进入到页面静态资源优化的最后一站 —— 视频。

喜欢的朋友欢迎关注我的博客RSS 订阅


「性能优化」系列内容

  1. 带你全面掌握前端性能优化 🚀
  2. 如何利用缓存减少远程请求?
  3. 如何加快请求速度?
  4. 如何加速页面解析与处理?
  5. 静态资源优化的总体思路是什么?
    1. 如何针对 JavaScript 进行性能优化?
    2. 如何针对 CSS 进行性能优化?
    3. 图片虽好,但也会带来性能问题
    4. 字体也需要性能优化么?(本文)
    5. 🔜 如何针对视频进行性能优化?
  6. 如何避免运行时的性能问题?
  7. 如何通过预加载来提升性能?
  8. 尾声

目前内容已全部更新至 ✨ fe-performance-journey ✨ 仓库中,陆续会将内容同步到掘金上。如果希望尽快阅读相关内容,也可以直接去该仓库中浏览。


参考资料

  1. Controlling Font Performance with font-display
  2. Getting started with CSS Font Loading
  3. A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES
文章分类
前端