HTML文档中对于第三方字体的按需加载与视觉占位设计实践-html教程-PHP中文网

font-display: swap 是按需加载字体的视觉底线，它使文本立即用后备字体渲染，字体加载完成后无感替换；而 block 会导致 FOIT（文字空白），fallback 仅提供约 100ms 加载窗口，auto 实际等同于 block。

html文档中对于第三方字体的按需加载与视觉占位设计实践

不加 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

是唯一能在 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 是最稳妥方案，不依赖 JS，IE9+ 都支持。但漏掉 &display=swap 就等于回到 FOIT 状态。

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

正确写法：

<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 更可控

图标不显示，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；若被广告屏蔽插件拦截，得关插件或换源