字体加载最佳实践

字体文件在项目中的应用可以说是非常普遍的。例如使用第三方字体,以 iconfont 形式存在的字体图标等等。 但是加载这些字体文件可不是简单一句 @font-face 就完事了。

先看两张对比图:

1
2
3
4
5
// 自定义字体
@font-face {
font-family: 'sleek';
src: url('https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2');
}

前

1
2
3
4
5
6
// 自定义字体
@font-face {
font-display: swap;
font-family: 'sleek';
src: url('https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2');
}

后

恼人的 FOIT

首屏加载中的 FOUC(Flash of Unstyled Content) 是需要极力避免的,为此我们常常将关键路径使用的样式内联到 HTML 中。 同样的,字体文件在加载完成之前,浏览器会使用缺省字体显示内容,这就是 FOUT(Flash of Unstyled Text)。 但是问题就出在这里,除了 IE,其他浏览器都会等待 3 秒才展示系统字体,这就造成了 3 秒的 FOIT(Flash of Invisible Text)。用户不得不面对长达 3 秒消失了文字的内容。

font-display

为了让浏览器立即使用缺省字体现实内容,可以使用 font-display 这个 CSS 新属性。

立即使用缺省字体,Web 字体加载完成后立即更换,重新渲染:

1
font-display: swap;