跳转到主要内容

性能：子集、字体显示策略和预连接

适合谁看：关心首屏速度和流量的前端开发者、站长。

浏览器只下载用到的分片

文风的 CSS 由很多条 @font-face 组成，每条带一个 unicode-range，对应一个 woff2 分片。页面上出现了哪些字，浏览器就只下载包含这些字的分片。所以引入 full 不等于下载整个字体。

unicode-range 的原理见 MDN（英文）：unicode-range。

选更小的子集

情况 建议
内容不固定，有用户评论、人名地名 full
基本是中文，偶有英文 zh，西文交给备用字体或另一款西文字体
落地页、活动页，文案固定 zh-common，上线前逐字检查有没有缺字

子集是否存在、怎么拼地址，见《网页字体地址规则》。

字体显示策略

文风 CSS 里每条 @font-face 都已经写了 font-display: swap：字体没下载完时先用备用字体显示文字，下载好再替换。这样文字不会长时间空白，代价是替换时可能跳动一下。

减少跳动的办法是选一个字面大小接近的备用字体，例如黑体类用 "PingFang SC", "Microsoft YaHei"。font-display 各取值的含义见 MDN：font-display。

预连接

在 <head> 最前面加一行，浏览器会提前和字体服务器建立连接：

说明见 MDN：rel=preconnect。

不要 preload 某个 woff2 分片。 页面要用哪几片由浏览器根据文字决定，你手动指定的那一片多半用不上。

字重别引太多

每多一个字重，就多一份 CSS 和一批分片。一般网站正文一档、标题一档就够了，最多三档。

自己检查

浏览器开发者工具「网络」面板，筛选「字体」，刷新页面，看下载了几个 woff2、一共多大。和不引入字体时比较一下首屏时间。

接下来读什么

这篇文档对你有帮助吗？