font-display: swap 是按需加载字体的视觉底线，它使文本立即用后备字体渲染，字体加载完成后无感替换；而 block 会导致 FOIT（文字空白），fallback 仅提供约 100ms 加载窗口，auto 实际等同于 block。
font-display: swap 是按需加载字体的视觉底线
不加 font-display: swap，浏览器默认行为就是先藏文字（FOIT），等字体下载完成或超时（通常 3 秒）才 fallback——用户看到的是空白或长时间系统字体延迟出现。这不是 bug，是规范定义的 block 行为。
swap 的实际效果是：文本立刻用后备字体渲染，字体文件后台加载，一就绪立即无感替换（可能触发一次重排）。它不要求改 HTML 或写 JS，一行 CSS 就生效。
- 别用
font-display: block：等于主动制造 FOIT，首屏文字消失风险极高 - 慎用
font-display: fallback：只给 ~100ms 加载窗口，适合非关键文字（如页脚小字），但标题/正文大概率 fallback 成系统字体 - 别依赖
font-display: auto：现代浏览器基本等同于 block，不能当“智能选择”用 - 兼容性没问题：
swap在 Chrome 87+、Firefox 75+、Safari 14.1+ 全支持，iOS 14.5+ 也 OK
preload 关键字体必须带 crossorigin 属性
<link rel="preload"> 是唯一能在 HTML 解析阶段就发起字体请求的手段，比 @font-face 里的 src 提前 200–500ms。但它有个硬性条件：只要字体文件跨域（包括 CDN、Google Fonts），就必须加 crossorigin，否则浏览器直接忽略该 preload。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="/fonts/inter-bold-latin.woff2" as="font" type="font/woff2" crossorigin>
-
as="font"和type="font/woff2"缺一不可，否则资源不会被复用到后续@font-face - 只预加载真正首屏用到的字重，比如标题用
Inter-Bold，正文用Inter-Regular，就分别 preload 两个文件，别把整套 variable font 一起 preloaded - 不能和
font-display: optional共存——后者会让浏览器跳过加载，preload 就白写了
Google Fonts 必须带 &display=swap 参数且 URL 中 & 要转义
直接用 <link rel="stylesheet"> 加载 Google Fonts 是最稳妥方案，不依赖 JS，IE9+ 都支持。但漏掉 &display=swap 就等于回到 FOIT 状态。
正确写法：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-
&是 HTML 实体，不是&字符；URL 中未转义的&会导致整个 link 解析失败 - 用
css2接口，别用旧的css（如https://fonts.googleapis.com/css?family=Roboto），后者不支持精简字重，会拉下全部变体 - 只声明实际用到的字重组合，比如只用 400 和 700，就写
wght@400;700，别写裸名family=Roboto——它会加载斜体、所有语言子集、所有字重，体积翻几倍 - 中文项目建议本地托管：Google Fonts 在国内访问不稳定，且
display=swap对中文字体效果有限（中文字体体积大、子集复杂），本地 + woff2 + swap 更可控
图标字体（Font Awesome / iconfont）不显示的三大断点
图标不显示，90% 不是代码写错，而是加载链在三处断裂：路径、类名、字体族。DevTools 里看 Computed 样式中 font-family 最终值，如果没生效为对应字体名（如 "Font Awesome 6 Free"），就说明断了。
- Font Awesome v6 类名必须带前缀：
fas fa-home，漏掉fas就只渲染空格；确认引入的是 v6+ CDN：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css - 本地引入时，
@font-face里的url()是相对于 CSS 文件路径解析的，不是 HTML 页面路径。比如 CSS 在/css/iconfont.css，字体在/fonts/iconfont.woff2，就得写url('../fonts/iconfont.woff2') - 图标依赖三个条件同时成立：
font-family生效 +::before { content: "\e600" }存在 + 字体文件中\e600位置真有字形。Network 面板过滤font，看是否返回 200；若被广告屏蔽插件拦截，得关插件或换源
按需加载的本质不是靠运行时 JS 判断，而是构建时切分：子集化（只留 ASCII 或中文常用字）、拆字重（Regular/Bold 分开）、preload 首屏所用项。这些动作一旦漏掉任意一环，swap 再好也救不回首屏文字闪动或图标空白。
