你可能把字体加载用错了——速度与体验双杀，该怎么补

不少开发者已在 X（原 Twitter）上讨论了 Jono Alderson 的一篇深度长文，信息量大也挺硬核。下面给出更短、更实操的版本，给时间紧、但又想把站点做快的人。

把一行 Google Fonts 的粘到里就完事？如果答案是“是”，那这篇正对路。

字体不是纯视觉选择，它们直接影响性能与转化。

不少开发者已在 X（原 Twitter）上讨论了 Jono Alderson 的一篇深度长文，信息量大也挺硬核。下面给出更短、更实操的版本，给时间紧、但又想把站点做快的人。

字体会：

拖垮 Core Web Vitals惹恼用户甚至吞掉你的转化

避免踩过的坑，省下一大截返工时间。

五个常见误区（以及为何会翻车）

“Google Fonts 免费又简单，何乐不为？”看似省事，实际引入额外 DNS 查询、TLS 握手，还可能带来隐私与延迟问题。“可变字体=性能药丸。”灵活是真灵活，但不做子集（subsetting）就可能是大体积炸弹。“font-display: swap能解决一切。”它能避免“不可见文本（FOIT）”，但回退字体不匹配会带来丑陋跳动。“回退字体无所谓。”很重要。度量不匹配会造成字行位移，CLS 飙升。“没人会在意字体。”用户不说，但白屏他们一定会走。白屏=更高跳出。

字体如何拖慢速度、毁掉体验

字体会阻塞文本渲染，用户盯着一片空白文件越重，移动端越痛苦回退不匹配引发CLS（Cumulative Layout Shift）三方 CDN增加时延、削弱隐私与可控性每一毫秒的浪费，都是少一个留存

修复字体加载的实战清单

做子集（Subsetting）不讲希腊语就别把希腊字符打包进去。只留必需字符，常见做法：拉丁基本集+常用符号。用现代格式WOFF2体积小、兼容广，默认上它。自托管（Self-host）掌控缓存策略与版本；少一层第三方依赖，少一分不可控延迟。预加载关键字体把最重要的字重/样式提前告诉浏览器。

谨慎选择font-displayswap可避免 FOIT，但可能引起跳动；**optional** 往往能更好兼顾 CLS。重要内容优先、非关键内容酌情。

@font-face { font-family: "MyFont"; src: url("/fonts/MyFont-regular.woff2") format("woff2"); font-display: optional; /* 或 swap / fallback，按页面策略调整 */}选“度量相近”的回退字体用**度量接近（metrically compatible）**的系统字体做 fallback，减少回流与跳动。

body { font-family: "MyFont", Arial, Helvetica, system-ui, sans-serif;}定期体检用 DevTools 看瀑布图：字体应早加载、体积小、可缓存；检查是否多次下载、是否被阻塞。

一张“该与不该”的速查表

代码片段（拿走即用）

预加载关键字重：

声明字体（自托管 + 可控显示策略）：

@font-face { font-family: "Inter Var"; src: url("/fonts/Inter-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: optional;}

应用并设置回退：

html { font-family: "Inter Var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}

为什么这件事值得你现在就做

想象一桶金黄的蜂蜜