font-display 选 swap 还是 optional，两周实测的数据

font-display 选 swap 还是 optional，这事没有标准答案，但可以测。今年 2 月我们给两个站各跑了两周，结论是内容站选 optional，营销站选 swap 加 size-adjust，两者对留存的差别看不出来。

三种取值的实际差别

swap：文字立刻用回退字体渲染，自定义字体到了再换。好处是内容不会空白，坏处是切换时有一次视觉跳动，中文站比英文站明显。

optional：字体在极短时间内可用才用，超时就用回退字体直到下次访问。好处是几乎不跳动，坏处是首次访问的用户可能一直看到系统字体。

block：短暂隐藏文字等字体到位。这个基本别用，首屏文字空白三秒比字体丑更糟。

两周实测数据

站 A 是文档站，正文为主。swap 的 LCP P75 是 1.6 秒，optional 是 1.5 秒，差别很小，因为 h1 用哪个字体渲染出来都是最大元素。但 CLS 差别大：swap 是 0.09，optional 是 0.01。

站 B 是营销首页，大标题承担品牌感受。swap 的 LCP 是 1.9 秒，optional 是 2.3 秒。原因是大标题在 swap 下会被重绘，但至少先出现在首屏；optional 下首次访问看不到自定义字体，下一次访问才生效。CLS 方面 swap 是 0.14，optional 是 0.02。

我们的选择

内容站选 optional。文档、博客、术语表以阅读为主，字体视觉一致性没那么重要，稳定更重要。

营销站选 swap，但必须配两件事：字体文件 preload，回退字体加 size-adjust 校准。这两件做完，swap 的 CLS 从 0.14 降到 0.03 左右。站 B 改完两周，真实数据稳定在 0.04。

一个反例

我见过一个站把所有字体都设成 block，理由是"避免闪烁"。结果移动端首屏空白 2.8 秒，用户以为网站挂了。这种做法在 2026 年没有任何理由。

还有人给所有字体都 preload，一次 preload 四个字体文件，等于把首屏带宽分给四个资源，LCP 反而更差。preload 只给首屏真正用到的那一个。

怎么自己测

不用搞复杂，两个页面、各跑两周，看 GSC 的真实数据就够。重点看两个数：LCP 的 P75 和 CLS 的 P75，别只看实验室。

如果两周内数据波动超过 20%，说明样本不够，需要更长时间或者更大的流量。这种时候别急着下结论，先看有没有其他改动混进来了。

落地时的两个细节

一是字体文件要和 CSS 在同一层 CDN 上，别一个在源站一个在 CDN，跨层回源会把收益吃掉。我们有个客户字体放在对象存储，没开缓存头，每次访问都要回源，改了缓存策略后 P75 从 700 毫秒降到 90 毫秒。

二是用 web vitals 的 JS 埋点看真实用户数据，别只看实验室。实验室环境是本地缓存加高速网络，测不出用户手机上的真实情况。我们现在的做法是每周拉一次真实用户数据，超过阈值就回看那次发布改了什么。