font-display: swap 必须写在 @font-face 规则内部，仅对该声明生效；同一字体族不同字重需独立声明；需配合理想的 font-family 回退链、preload + crossorigin 预加载及字体子集切分才能实现无感替换。
font-display: swap 必须写在 @font-face 规则内部
写在 body、.text 或全局 CSS 里完全无效，浏览器直接忽略。它只对当前 @font-face 声明生效，不是继承属性，也不是可级联的样式。
常见错误是复制别人代码时漏掉分号后换行、拼错值（比如写成 swop、swap: 或加引号 "swap"），导致整个 @font-face 被丢弃——字体不加载，连系统 fallback 都没机会触发。
正确写法示例：
@font-face {
font-family: 'InterVar';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
同一字体族不同字重必须各自声明 @font-face
比如你用了 font-weight: 400 和 700，就不能只写一个 @font-face 并设 font-weight: 100 900 —— Safari 和部分 Android WebView 会把未显式声明的字重当 fallback 失败，结果标题变粗/变细或回退到 Times New Roman。
必须分开写：
@font-face {
font-family: 'InterVar';
src: url('/fonts/inter-var-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'InterVar';
src: url('/fonts/inter-var-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
- 每个
@font-face都要带font-display: swap -
font-family名称必须完全一致（包括大小写和连字符） - 路径要精确匹配，大小写敏感，尤其部署到 Linux 服务器后
swap 不是万能的，得配好 font-family 回退链
设了 font-display: swap 却看到文字突然“变胖”或“缩窄”，问题往往不在字体本身，而在回退链设计不合理。
例如在旧版 Android 上，sans-serif 可能映射到 Droid Sans（偏细），而你的自定义字体是 Inter（中等粗细），替换后视觉跳变明显。
推荐写法：
font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
- 优先列平台原生字体（
-apple-system、BlinkMacSystemFont）保证渲染一致性 - 避免空格命名（如
Inter Var），CSS 中要用引号包裹，但引用时易出错，建议统一用InterVar - 别省略末尾的
sans-serif，它是兜底中的兜底
preload + crossorigin 是 swap 发挥效果的前提
如果字体文件本身加载慢，swap 只是让系统字体先顶上，但替换时机仍不可控。想让替换更早发生，必须配合 <link rel="preload"> 提前抓取。
关键点：
-
<link rel="preload">必须出现在所有引用该字体的 CSS<link>标签之前，否则浏览器已发起请求，preload 白做 - 必须带
as="font"和type="font/woff2"，否则 Chrome 不复用预加载资源 -
crossorigin属性不能少：WOFF2 是跨域资源，不加会导致控制台报 CORS 错误，preload 失效 - HTML 中的
href路径要和@font-face中的url()完全一致（含斜杠方向、大小写）
示例：
<link rel="preload" href="/fonts/inter-var-400.woff2" as="font" type="font/woff2" crossorigin>
最常被忽略的是：字体子集切分。哪怕用了 swap，一个 300KB 的完整 Inter 字体在弱网下仍要加载数秒，替换延迟肉眼可见。拉丁文+数字子集通常压到 30–50KB，这才是 swap 真正“无感”的基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
