font-display: swap是必须配置的底线措施，它强制用备用字体立即渲染再替换自定义字体，避免foit/foft；须写在@font-face中，配合document.fonts.ready确保就绪，并选用度量值相近的fallback字体。
字体加载本身不会“导致”闪烁，但浏览器对未就绪字体的处理策略会直接表现为 FOIT（空白闪）或 FOUT（样式闪），这是 HTML 页面中文字区域最典型的视觉割裂现象。
font-display: swap 是必须写的底线配置
不写 font-display，Chrome 默认按 block 行为处理：文字区域留白约 3 秒，等字体加载完成或超时才渲染——这就是 FOIT。Safari 旧版本甚至忽略该属性，行为更不可控。只有显式声明 font-display: swap，才能强制浏览器立即用 fallback 字体撑开布局，等 Web Font 就绪后替换。
-
font-display必须写在@font-face规则内部，写在外部 CSS 类里无效 - 漏写
format("woff2")或写错（比如写成format("woff")），部分浏览器会降级忽略font-display - 它不能消除重绘，但能把“空白等待”变成“可见过渡”，体验断层大幅收窄
preload 关键字体但必须带 crossorigin
只靠 font-display: swap 不够：如果字体文件大、CDN 延迟高，fallback 显示时间过长，“闪”的持续感依然明显。预加载能提前触发下载，缩短 swap 窗口。
- 只预加载首屏真正用到的字重，比如标题用的
"Inter Bold"，别把Italic、Thin全 preload -
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>中的crossorigin缺失会导致静默失败——即使路径完全正确 - preload 不替代
@font-face：它只是提前拉取资源，实际渲染仍依赖 CSS 中的字体声明
fallback 字体链顺序决定是否“跳”而不是“闪”
就算 swap 和 preload 都到位，如果 fallback 字体和目标字体度量值（x-height、字宽、line-height）差异太大，替换时就会发生 layout shift——用户看到的是文字“跳动”，不是平滑替换。
- 中文环境 fallback 要分平台：Windows 用
"Microsoft YaHei"，macOS/iOS 用"-apple-system"或"PingFang SC"，Linux 用"Noto Sans CJK SC" - 避免混搭衬线与无衬线字体（如
"Georgia", "Inter"），字宽差会放大跳变 - 所有字体名统一加引号，尤其是含空格的（如
"Segoe UI"），否则解析可能出错
真正难控的不是“闪不闪”，而是“闪得多突兀”：它取决于 fallback 与 target 字体的度量对齐程度、网络延迟波动、以及是否在首屏关键文本上做了精准 preload。这些细节不调试，光靠加一行 font-display: swap 只是把问题从白屏换成了跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
