很多人看到页面字体闪一下，第一反应是“网络慢”或者“浏览器抽风”。其实更常见的原因是字体加载策略不合理，导致浏览器在文本显示阶段做了错误取舍。
典型症状有两个：
- FOUT：先用后备字体显示，Web 字体加载后再替换，页面会闪一下。
- FOIT：在 Web 字体没加载完前，文字先不显示，用户会看到短暂空白。
如果你的页面是从 HTML 编辑器或在线编辑器导出，问题更容易发生，因为很多工具只负责把字体链接塞进去，却不会帮你处理预加载、后备字体度量和资源体积。
建议结合 HTML 编辑器写 Landing：首屏与首屏性能、字体加载优化指南、资源优先级提示指南 和 HTML 模板图片策略 一起看。
一、先讲清机制：浏览器为什么会在字体上“犹豫”
浏览器渲染文本时，不是先把所有字体资源都准备完再显示页面。它通常会在“尽快显示内容”和“等待正确字体”之间做权衡。
于是就出现两种表现：
- 为了让用户尽快看到文字，先显示系统字体，再替换成 Web 字体，这就是 FOUT。
- 为了保证视觉一致，先隐藏文字等字体到位，这就是 FOIT。
这两种都不是 bug，而是加载策略的结果。
二、FOUT 和 FOIT 哪个更糟，要看页面类型
很多人会问：到底该避免哪一个？
答案不是绝对的，而要看页面目标：
| 场景 | 更怕什么 | 原因 |
|---|---|---|
| 内容页、博客页 | FOIT | 用户先看不到字，体验最差 |
| 营销页、品牌页 | 过度 FOUT | 视觉跳动会破坏首屏一致性 |
| 表单页、工具页 | FOIT + CLS | 文本延迟和布局跳动都会影响操作 |
大多数实际项目里，更推荐优先避免 FOIT，因为“先看不到字”通常比“字体稍后替换”更伤体验。
三、HTML 编辑器导出页面时最常见的字体坑
编辑器导出页面时，常见问题不是字体本身，而是资源接入方式粗糙：
- 一次加载过多字重和字族。
- 直接引入第三方字体链接，没有预连接或预加载。
- 没有设置合理的 font-display。
- 后备字体度量差异大，替换时布局明显跳动。
这些问题叠加后，页面即使“设计稿看起来没问题”，线上也会出现首屏不稳。
四、最重要的三个优化点：体积、时机、后备字体
1. 先减体积
字体加载优化第一步不是写技巧，而是减少资源量。
建议先问三个问题：
- 是否真的需要 6 个字重
- 是否能只加载当前语言所需字符集
- 是否能把展示字和正文字分开策略处理
如果一上来就加载多个字重、多个变体，后面再怎么补 preload 都只是补救。
2. 再控制加载时机
对首屏必须用到的字体，可以考虑：
- preconnect 到字体域名
- preload 首屏所需字体文件
- 明确设置 font-display
对非首屏字体，则不要强行抢带宽。资源优先级错了，反而会拖慢关键内容。
3. 别忽略后备字体
很多页面虽然设置了系统后备字体，但字宽、字高差异很大，替换后仍然会明显抖动。
更稳的做法是：
- 选择度量更接近的 fallback 字体
- 控制标题和按钮这类敏感区域的字号与间距
- 对关键文本区做替换前后对比
五、font-display 不是万能答案，但一定要显式设置
常见误区是把 font-display 当成一键修复开关。实际上它只是告诉浏览器“你更偏向哪种取舍”。
一般经验：
- 正文更适合使用 swap 或类似优先显示文本的策略
- 品牌 Logo 或视觉要求极高的特殊文本，可能需要更谨慎的加载方式
关键点不在于背单词，而在于知道你是在为“可读性”还是“品牌一致性”优先。
六、失败案例：页面看起来没问题，上线后首屏却一直抖
这类问题经常发生在营销页：设计稿使用了一组较宽的品牌字体，开发时直接通过编辑器或 CDN 引入，没做任何预加载和后备字体匹配。结果首屏先显示系统字体，几百毫秒后替换成品牌字体，标题换行位置变化，按钮也跟着跳动，最终把 CLS 和视觉体验都拖差。
根因通常是三个叠加：
- 字体文件太大
- 关键文本没做优先级管理
- fallback 度量差异太大
修复步骤通常是：
- 缩减字重和字符集。
- 为关键字体增加预加载。
- 调整 fallback 选择与标题宽度。
- 重新观察首屏替换前后的布局差异。
七、编辑器导出页面时的一个实用策略：先保系统字体可读，再追品牌一致
对大多数业务站点来说，第一目标不是“任何时刻都使用品牌字体”，而是“任何时刻都能稳定阅读”。
因此更实用的顺序通常是：
- 保证系统字体下也有合理排版。
- 确保 Web 字体加载失败时页面仍可读。
- 再去优化替换速度和视觉一致性。
这个顺序比单纯追求“设计稿 1:1 还原”更适合真实网站。
八、一个可以直接执行的检查流程
你可以按下面顺序排查字体加载问题：
- 确认首屏真正用了哪些字重和字族。
- 检查是否有不必要的字体资源被一起加载。
- 检查是否设置了 font-display。
- 检查是否需要 preconnect 和 preload。
- 用慢网速模拟观察 FOUT、FOIT 和布局跳动。
- 对标题、按钮、导航做 fallback 对比。
这六步通常已经足够找出大部分问题。
九、检查清单
- 是否只加载了首屏和当前语言真正需要的字体资源
- 是否为关键字体显式设置了合适的加载策略
- 是否区分了关键字体和非关键字体的优先级
- 是否为字体域名做了必要的预连接或预加载
- fallback 字体的字宽和行高是否足够接近
- 是否在慢网速环境下实际观察过 FOUT、FOIT 和布局跳动
结语
FOUT 和 FOIT 不是孤立的视觉小毛病，而是字体资源策略、加载时机和排版容错能力共同作用的结果。对 HTML 编辑器导出的页面来说，最有效的做法不是祈祷浏览器自动处理，而是主动控制体积、优先级和 fallback。只要这三点做对，首屏稳定性通常会明显改善。