font-display不加速下载，仅控制渲染时机：必须写在@font-face内部，值为swap可实现“先显示后备字体、再替换”，optional则可能跳过加载；错误位置或混用会导致失效。
font-display 不加速下载，但能直接决定用户第一眼看到什么——它把“等字体”这个阻塞行为，变成“先显示再替换”的可控流程。
font-display 写错位置就完全失效
它只能出现在 @font-face 规则内部，写在普通 CSS 选择器里（比如 body { font-display: swap; }）或 <link> 标签中毫无作用。常见错误包括：
- 误以为加在
font-family声明里就行，其实必须紧挨着src和font-weight等属性写在同一个@font-face块中 - 多个同名
font-family的@font-face声明混用不同font-display值，导致部分字重走block、部分走swap，行为不可预测 - 用
@import引入字体 CSS 时没检查源文件是否已含font-display，结果默认退化为block
swap 和 optional 的实际差异远不止“换不换”
swap 是多数场景的起点：文字立刻用后备字体渲染，字体加载完后替换，有轻微布局偏移但用户几乎无感；optional 更激进——只在 100ms 内能从缓存加载才用，否则全程跳过，适合非关键字体（如装饰性标题）。但要注意：
-
optional在 Safari 14.1 之前会降级为block，造成白屏，必须用@supports (font-display: optional)包裹或提供 fallback - 即使设了
swap，若后备字体（如sans-serif）和自定义字体宽度差异大，仍可能引发重排，建议用font-size-adjust或选宽度接近的系统字体 -
fallback表现不稳定：100ms 阻塞期后 fallback，但后续字体加载完成是否 swap 取决于浏览器实现，Chrome 支持，Firefox 不一定
font-display 解决的是渲染时机，不是文件大小
它不减少请求体积、不缩短下载时间，只是让浏览器别干等着。如果字体文件本身过大（比如未子集化、未用 woff2），即使 font-display: swap 也浪费带宽、拖慢整体资源调度。所以必须配合：
- 用
<link rel="preload" as="font" type="font/woff2" crossorigin>提前触发字体请求（注意加crossorigin，否则无效） - 对中文等大字符集做子集化，避免加载整套字重（例如只导出页面实际用到的汉字+ASCII）
- 确认 CDN 返回的字体响应头含
Cache-Control: public, max-age=31536000，否则每次都是新请求
真正容易被忽略的点是：font-display 的效果高度依赖后备字体链的设计。一个没配好 fallback 的 font-family: 'Inter', system-ui, sans-serif，在某些 Linux 系统上可能回退到极细的 DejaVu Sans，导致可读性骤降——性能优化的前提，是视觉一致性没被破坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
