foit指字体加载时文字空白，fout指先用系统字体再替换；默认font-display未设导致浏览器策略不一，swap最常用但需控制字体度量差异，preload关键字体可缩短swap窗口，自助托管比第三方服务更可控。
字体加载时的 FOIT 和 FOUT 是什么
浏览器加载自定义字体时，会面临两个典型现象：FOIT（Flash of Invisible Text）和 FOUT（Flash of Unstyled Text）。前者是文字先空白、等字体加载完才显示；后者是先用系统字体渲染，再替换为自定义字体。现代浏览器默认倾向 FOIT，但对用户体验伤害更大——尤其在弱网或首屏关键文案上。
根本原因在于 @font-face 的 font-display 属性未显式设置。不写它，就等于交给浏览器自己猜，而 Chrome 和 Safari 的“默认策略”并不一致。
-
font-display: block→ 强制 FOIT，3s 内不显示文字（风险最高） -
font-display: swap→ 触发 FOUT，立即用回退字体，加载完立刻切换（最常用） -
font-display: optional→ 浏览器可跳过加载，适合非核心字体（如装饰性 icon font）
如何让 swap 不闪得那么突兀
单纯设 font-display: swap 只是把问题从“空白”变成“跳变”，字号、行高、字宽差异大时，段落重排明显。这不是 bug，是字体度量值（metrics）天然不同导致的。
缓解的关键不是禁掉 swap，而是收窄回退字体与目标字体的视觉差距：
- 用
font-family列表提供多层 fallback，比如："Inter", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI" - 避免在
font-family里混用衬线/无衬线（如同时写"Georgia", "Inter"），字宽差异会放大跳变 - 对标题等敏感元素，可加
size-adjust或ascent-override（CSS Font Loading Level 4，目前仅 Chrome 支持）微调基线，但兼容性差，慎用
预加载关键字体文件是否必要
对首屏必须出现的字体（如 logo 文字、主导航），<link rel="preload"> 能提前触发下载，缩短 swap 窗口。但它只对 font-display: swap 或 optional 有效；设成 block 时，预加载反而可能增加阻塞。
实操注意点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 路径必须和
@font-face src完全一致（包括查询参数），否则浏览器不复用缓存 - 只预加载 WOFF2（现代格式），别加 WOFF 或 TTF，避免浪费带宽
- 不要给所有字体都预加载——图标字体、小字注释字体，预加载收益极低，还占 HTTP/2 连接
示例：<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
第三方字体服务（如 Google Fonts）怎么控节奏
直接引入 https://fonts.googleapis.com/css2?family=... 相当于把字体加载逻辑全权交给 Google，它默认用 font-display: swap，但你无法控制其 CDN 缓存策略、HTTP 头、甚至字体文件版本。
更可控的做法是自助托管：
- 用
google-webfonts-helper工具下载字体文件，生成本地@font-face声明 - 自行压缩（如用
woff2_compress）、子集化（剔除不用的 Unicode 区块） - 配合
preload+font-display: swap，全程可测、可调、可灰度
唯一代价：失去自动更新。但字体更新本就不该是高频操作——稳定比新更重要。
真正难处理的，是那些嵌在 CMS 或第三方组件里的字体请求，它们绕过你的构建流程，也躲不开 FOIT。这时候只能靠 document.fonts.load() + fontfaceobserver 做运行时兜底，但成本陡增，优先级应低于优化自有字体链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
