网页字体怎么优化加载？四个方向与实测思路

页面在本地打开很顺，上线之后首屏先闪一下默认字体，几百毫秒后突然换成设计稿里的字体，标题长度跟着变，整页内容往下跳一截。用户的滚动位置被打断，体验直接受损。

问题源头通常在字体文件本身：中文整包十几兆，却排在关键渲染路径上。哪怕带宽充足，下载和解析的时间也省不掉。

可优化的方向有四个：换更小的格式、只发用得到的字、让加载不阻塞首屏、把文件缓存住。下面每个方向给出可执行的做法，末尾说怎么验证效果。

一、格式选择：先换 WOFF2

把 TTF 换成 WOFF2。 WOFF2 采用更适合字形的压缩算法，中文字体转过去常常只剩原来的三成左右。这一步不用改代码逻辑，投入产出比高。转换工具可选 fonttools 或开源转换器，转换后用字体属性面板确认字符映射与名称字段完整。

在 @font-face 里声明格式。 让浏览器按支持情况挑选，写法大致是：

@font-face {
 font-family: MyCN;
 src: url(/fonts/mycn.woff2) format(woff2),
 url(/fonts/mycn.woff) format(woff);
 font-display: swap;
}

WOFF 兜底要不要留。 看访问统计里老浏览器的占比。占比很低时，只发 WOFF2 能少维护一份文件。

一个被低估的替代方案：可变字体。 需要多个字重时，一个可变字体文件往往比三四个静态文件更小，请求数也更少。

二、子集化：只发页面用得到的字

格式压缩有上限，字符数量才是大头。中文整包两万多字形，页面上往往只用几百个。

做法。 收集页面文本并去重，用 fonttools 的 subset 生成新字体：

pyftsubset mycn.ttf --text-file=used-chars.txt \
 --flavor=woff2 --layout-features=* \
 --output-file=mycn-subset.woff2

几个容易踩的坑。

一是标点与数字要一起提取。漏掉全角标点，页面上会出现个别字符突然换字体，比汉字掉字更显眼。

二是预留余量。文案会改，留一批常用字可以减少重新生成的频率。

三是文件名带版本号或内容哈希，例如 mycn-subset.a1b2c3.woff2。否则内容更新后，浏览器可能仍用缓存里的旧文件。

四是把子集化接进构建流程。手工执行一次，后续内容更新就会忘记。

按需拆分也是一种做法。 首屏关键文案做一个小子集，其余内容另做一个稍大的子集延迟加载，让首屏更快出字。

三、按需加载与回退字体栈

用 font-display 控制阻塞行为。 swap 表示先用回退字体渲染，字体到达后再替换，首屏不会空白，代价是有一次视觉切换。可选值还有 block、fallback、optional，中文大字体通常用 swap 或 optional。

关键字体预加载。 对首屏必须用到的字体加预加载提示，让浏览器提前发起请求：

<link rel=preload as=font type=font/woff2 href=/fonts/mycn-subset.woff2 crossorigin>

注意 crossorigin 要带上，否则字体请求可能被重复发起。

回退字体栈要写细。 回退字体与原字体字面率差太多，切换时布局会跳。挑一款字面接近的系统字体放在回退位置，跳动能明显减轻。

顺带调一下回退字体。 可以临时调整回退字体的字号或字距，让它的整体宽度更接近目标字体，进一步减少跳动。

非关键字体延迟加载。 只用在页脚或次要模块的字体不必进关键路径，等主要内容渲染完再加载，或滚动到可视区域附近再加载。

四、缓存与预热

长缓存加内容哈希。 字体文件基本不变，可以设置较长的缓存时间。配合文件名哈希，内容变了路径就变，不存在缓存失效问题。

确认 CDN 对字体的处理。 有些 CDN 默认不缓存字体类型，或者响应头缺失导致字体被拦截。跨域加载时，响应头里缺少允许跨域来源的字段，浏览器会静默放弃字体，页面上表现为字体没生效，控制台里能看到提示。

预热常用字体。 对确认会访问的页面，可以在空闲时段提前拉起字体请求，用户进入时命中缓存。

五、上线前怎么实测

先看指标。 关注首屏内容渲染时间、字体文件的传输体积与请求耗时，以及布局偏移量。字体引起的跳动会体现在布局偏移指标上。

用性能面板看请求瀑布。 确认字体请求是否排在关键资源之前，是否与其他请求争抢带宽。

断网与慢速网络各测一遍。 把网络限速到较慢档位，观察回退字体到目标字体的切换是否刺眼。

换设备验证。 移动端与桌面端的字体渲染、缓存策略、系统回退字体都不同，两端都要过一遍。

先记基线再优化。 记下当前字体体积与首屏指标，每做一项优化复测一次。没有基线的优化，很难判断是否有效。

下面几款字体常被用在网页场景，字形规整、授权清晰，适合作为入手选项。

1. 思源黑体

风格：开源无衬线体，字腔开阔，字重梯度完整。
适配场景：网页正文与界面，中英混排表现稳定。
授权类型：SIL OFL 可商用可修改
字体详情：点击查看字体详情及预览效果
使用提示：该字体已收录于字由客户端，可在字由内一键激活调用，无需单独下载安装文件。

2. 思源宋体

风格：开源衬线体，横细竖粗对比克制。
适配场景：长文阅读页、电子出版物。
授权类型：SIL OFL 可商用可修改
字体详情：点击查看字体详情及预览效果
使用提示：该字体已收录于字由客户端，可在字由内一键激活调用，无需单独下载安装文件。

3. MiSans

风格：现代无衬线体，西文与数字设计完整。
适配场景：数据看板、数字密集的界面。
授权类型：免费可商用
字体详情：点击查看字体详情及预览效果
使用提示：该字体已收录于字由客户端，可在字由内一键激活调用，无需单独下载安装文件。

4. 阿里巴巴普惠体2.0

风格：中性黑体，笔画端部平直，字面偏大。
适配场景：运营页、活动页的正文与标题。
授权类型：免费可商用
字体详情：点击查看字体详情及预览效果
使用提示：该字体已收录于字由客户端，可在字由内一键激活调用，无需单独下载安装文件。

5. 霞鹜文楷

风格：基于开源楷体改造，笔画轻盈、结构端正。
适配场景：内容型站点的文艺向正文。
授权类型：SIL OFL 可商用可修改
字体详情：点击查看字体详情及预览效果
使用提示：该字体已收录于字由客户端，可在字由内一键激活调用，无需单独下载安装文件。

授权说明

网页嵌入字体同样要确认协议。免费可商用通常指允许输出图形结果，例如网页页面本身，一般不包括转卖字体文件、打包分发，或改换名称后二次发布。

开源协议（如 SIL OFL）范围更宽，允许修改字形与再分发，衍生版本需更换字体名称。做子集化属于对字体文件的修改，生成的子集文件同样受原协议约束，命名时不要沿用原字体名称冒充原版。

部分厂商对网页嵌入与页面访问量有单独约定，把字体文件放到自己服务器对外提供下载，风险高于页面渲染本身。上线前把授权说明页存档。

字由客户端把授权信息直接挂在字体详情页，可按免费商用、会员商用等类型筛选。下载字由客户端可免费领取试用会员，590 多款会员商用字体与 3600 多款免费商用字体不限量使用，累计收录 10500 多款。

常见问题解答

Q1：做了子集化，页面上还是有个别字不显示？

多数是字符提取时漏了，常见于标点、生僻字、以及后台动态插入的文案。把提取范围扩展到实际拿到的全部文本，并在构建流程里做成自动步骤。

Q2：字体已经换成 WOFF2，首屏还是跳，怎么办？

体积只是一部分原因。检查字体请求是否仍在关键路径上、font-display 有没有配好、回退字体的字面率是否接近。这几点调好，跳动能明显减轻。

Q3：预加载所有字体文件可以吗？

不建议。预加载会占用带宽优先级，把次要字体也预加载，反而拖慢关键资源。只对首屏必须用到的字体做预加载。

小结

优化按四步走：格式换 WOFF2、字符裁到实际用字、避免首屏阻塞与跳动、长缓存留住文件。

四项里成本各不相同。换成 WOFF2 和写全回退字体栈几乎零成本，建议先做；子集化收益明显但要接进构建流程；预加载与缓存属于细节调优。

每项优化前后都记录一次体积与首屏指标，用数据判断哪一项真正起了作用。选字体时可以用字由客户端按场景与授权类型筛选后一键激活，先把字形定下来，再进优化流程。