性能：子集、字体显示策略和预连接
目录
适合谁看：关心首屏速度和流量的前端开发者、站长。
浏览器只下载用到的分片
文风的 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> 最前面加一行，浏览器会提前和字体服务器建立连接：
<link rel="preconnect" href="https://cn.windfonts.com" crossorigin>
说明见 MDN：rel=preconnect。
不要 preload 某个 woff2 分片。 页面要用哪几片由浏览器根据文字决定，你手动指定的那一片多半用不上。
字重别引太多
每多一个字重，就多一份 CSS 和一批分片。一般网站正文一档、标题一档就够了，最多三档。
自己检查
浏览器开发者工具「网络」面板，筛选「字体」，刷新页面，看下载了几个 woff2、一共多大。和不引入字体时比较一下首屏时间。