必须显式设置font-display: swap，否则默认block导致首屏文字白屏1–3秒；需配合preload（带crossorigin）、woff2格式及子集化，document.fonts.load()仅用于失败上报而非首屏控制。
不加 font-display 就等于默认启用 block，首屏文字大概率白屏 1–3 秒——这不是加载慢，是浏览器在守规矩。
为什么 font-display: swap 是必须显式写的底线配置
浏览器对 @font-face 的实际默认行为是 font-display: auto，等同于 block：先隐藏文本约 100ms，再最多等待 3 秒加载字体，失败才 fallback。在线预览场景下，用户刚打开页面就盯着空白段落，体验直接崩坏。
swap 是唯一能在不改 HTML、不写 JS 的前提下，让文本「立刻可见」的方案。它强制浏览器用系统字体先渲染，等自定义字体一就绪就替换。
- 替换时可能引发轻微重排（尤其字宽差异大时），但比白屏好十倍
- 如果字体文件加载失败，用户永远看不到它，但内容始终可读
- 不适合 Logo 或极短标语——这类可改用
fallback，只给 100ms 窗口尝试加载
preload 字体必须带 crossorigin，否则请求被静默忽略
<link rel="preload"> 是唯一能在 HTML 解析阶段就触发字体下载的手段，但它对属性极其敏感：缺 crossorigin，哪怕字体跟页面同源，浏览器也直接跳过该请求。
正确写法只有一种组合：as="font" + type="font/woff2" + crossorigin（空值即可，crossorigin="" 或 crossorigin 都行）。
- 没写
crossorigin→ Network 面板里看不到请求，或 Priority 显示为lowest - 写了
crossorigin但字体服务没配 CORS 响应头 → 控制台报CORS error - 只
preload首屏确定用到的字重，比如Inter-Bold.woff2，别把整套 variable font 全 preloaded
只上线 WOFF2 格式，并做子集化
所有现代浏览器（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+）原生支持 WOFF2，压缩率比 TTF 高 30%~80%。中文字体子集化后效果更明显——比如只保留 ASCII 和常用汉字，体积常压到原大小 20% 以内。
常见错误是只写一个 src，结果在某些系统或网络条件下 fallback 失败。必须提供至少两个格式：优先 woff2，降级到 woff（不要用 ttf，它没压缩，体积大）。
- 别再为兼容 IE 保留 EOT 或 SVG——2026 年还在强求 IE 支持，只会拖慢所有现代用户
- 用
pyftsubset（fonttools）或 Transfonter 生成子集文件，构建时切分，不是靠 JS 判断 - 在线预览中，字体文件越小，首次渲染越快；体积每减半，首屏文字出现时间通常提前 200–400ms
document.fonts.load() 不适合控制首屏渲染
有人想用 document.fonts.load() 检测字体是否加载完成，再手动触发重绘。这在技术上可行，但完全错位：它无法改变首屏文字是否白屏的事实，因为此时 DOM 已渲染完毕，用户已经看到空白了。
它真正适用的场景只有两个：检测加载失败后上报埋点，或在非首屏区域（比如弹窗、折叠面板展开后）做字体就绪判断。
- 别用它来“等字体好了再显示文字”——这会让首屏延迟更不可控
- 它不能替代
font-display，也不是 preload 的补充，而是兜底手段 - 若需 fallback 提示（如“字体加载失败，已自动切换”），应在
load()的catch中处理，而非阻塞渲染
最易被忽略的是：即使你用了 swap，如果字体文件本身体积过大或服务器响应慢，替换仍会滞后，导致肉眼可见的“闪动”。所以优化顺序永远是：子集化 > 预加载 > font-display 配置，而不是反过来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
