仅靠引入字体css不足以避免布局偏移；必须三者协同：font-display: swap（须写在每个@font-face内）、（href、crossorigin、as、type须与@font-face完全一致），以及尺寸对齐的同类型fallback字体链。
直接结论：仅靠 <link rel="stylesheet"> 引入字体 CSS 不足以避免布局偏移；必须配合 font-display: swap、<link rel="preload">（带 crossorigin）、以及 fallback 字体链的尺寸对齐，三者缺一不可。
font-display: swap 必须写在 @font-face 里，且每个都要写
很多人把 font-display: swap 写在 font-family 声明或全局 CSS 变量里，完全无效。它只在 @font-face 块内起作用。
- 每个自定义字体的
@font-face都得单独声明font-display: swap，不能只在第一个里写 - Google Fonts 的
&display=swap参数本质就是帮你注入这个声明，删掉就退化成 FOIT（空白卡顿） -
font-display: optional看似“更省”，但会导致字体加载失败时永久 fallback，且可能引发多次重排（浏览器反复尝试加载又放弃） - 设成
swap后，文字会先用系统字体渲染——这时若 fallback 行高/字宽和自定义字体差异大，就会推挤内容，造成 CLS
preload 字体必须路径一致 + crossorigin + type
<link rel="preload"> 不是加了就生效。浏览器对字体预加载有硬性校验，漏任一条件都会静默忽略。
-
href必须和@font-face中src的 URL 完全一致（包括查询参数，如?v=2.1） - 必须显式写
crossorigin属性，即使字体同源——WOFF2 加载强制走匿名跨域模式 - 必须写
as="font"和type="font/woff2"（或对应格式），写成as="fetch"或漏掉type，Chrome 可能复用缓存但不触发字体解析 - 错误示例：
<link rel="preload" href="/fonts/inter.woff2">→ 缺crossorigin和as，等于没写
fallback 字体链要控制尺寸，不能混搭 serif/sans-serif
写了 font-display: swap 还看到文字“跳一下”，问题不在加载慢，而在 fallback 字体撑不开空间——这是典型的 CLS 根源。
- fallback 链中所有字体（如
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif）必须同属一类：全为无衬线（sans-serif）或全为等宽（monospace），禁止混用serif和sans-serif - 优先选系统字体中行高、x-height 最接近目标字体的作为第一 fallback，比如 Inter 对应
-apple-system或BlinkMacSystemFont，而非泛泛的sans-serif - 可在 CSS 中用
font-size-adjust: 0.5;（需支持）微调 fallback 渲染比例，但兼容性有限，更稳妥的是手动测试并锁定 fallback 组合 - DevTools → Elements → 计算样式里看
font-size、line-height、font-family是否在 swap 前后突变
link 标签位置错误会让所有优化归零
<link> 放错位置，等于前端性能白做。FOUC 和 hydration 失败都源于此。
-
<link rel="stylesheet">必须是的**直接子元素**，不能嵌套在<script></script>、<meta>或其他标签内 - 顺序必须是：
<title></title>→<link rel="stylesheet">（含字体 CSS）→ 其他<script></script>；否则字体声明还没读到，DOM 就开始渲染了 - 绝对不要用 JS 动态插入
<link>来“优化”——这只会把不可控的 FOUC 变成可预期的闪屏 - SSR 场景（如 Next.js）下，
外的<link>会导致服务端生成的样式上下文缺失，hydration 直接失败
最容易被忽略的点是 fallback 字体链的尺寸一致性——它不报错、不告警，只在用户滚动或缩放时悄悄偏移内容。测 CLS 不能只看 Lighthouse 分数，得开 DevTools → Rendering → Layout Shift Regions，真实观察文本块是否在 swap 瞬间发生位移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
