HTML文档结构之字体文件加载引用方式-html教程-PHP中文网

@font-face路径错误导致字体不加载，因url()路径必须相对于css文件位置而非html；需用network面板查404、避免中文空格、禁用file://协议、确保format()匹配及font-display生效。

html文档结构之字体文件加载引用方式

@font-face路径写错导致字体不加载

字体文件明明放对位置，但页面还是用默认字体——八成是url()里的路径错了。浏览器不会报错，只会默默回退，极难察觉。

url()路径是相对于当前 CSS 文件的位置，不是 HTML 文件。比如 CSS 在 css/style.css，字体在 fonts/inter.woff2，就得写 url('../fonts/inter.woff2')，不能写 url('/fonts/inter.woff2')（除非开了服务器根路径）
本地开发时别用 file:// 协议直接双击打开 HTML，跨域限制会让字体加载失败；用 npx serve 或 VS Code Live Server 启一个本地 HTTP 服务再测
路径里别含中文、空格或特殊符号，某些浏览器会直接跳过整个 @font-face 块
打开 DevTools → Network → 过滤 font，看请求状态：404 就是路径问题，200 但字体没生效，再查 MIME 类型或 CORS

Google Fonts 的标签漏参数就白引入

复制 Google Fonts 的标签后，只改了 family 却删了 &display=swap 或字重参数，结果文字卡白屏几秒——这不是加载慢，是配置没配全。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

&display=swap 必须保留在 URL 里，否则浏览器默认等字体加载完成才渲染文本（FOIT），用户看到空白
要用粗体或斜体，必须显式加参数，比如 family=Noto+Sans+SC:wght@400;700;italic@400；只写 family=Noto+Sans+SC 默认只加载 400 normal
<link> 必须放在里，且要在所有用到该字体的 CSS 之前（包括内联 <style></style>）
字体名大小写、空格、引号必须和 Google Fonts 页面上显示的一致，比如 "Noto Sans SC" 不能写成 noto sans sc 或 NotoSansSC

font-display: swap 不是加了就完事

font-display: swap 写在 @font-face 里才生效，写在 font-family 或其他地方完全无效。而且它只解决“是否显示备用字体”，不解决“布局偏移”。

每个 @font-face 块都得单独写 font-display: swap，不能只在第一个里写
它会让浏览器先用 fallback 字体撑开布局，等自定义字体加载完再替换——这可能引发 FOUT（Flash of Unstyled Text），比如行高突变、换行点移动
如果字体是图标字体或装饰性标题，可考虑 font-display: optional，加载慢就放弃，避免干扰首屏内容
<link rel="preload"> 配合 font-display: swap 才有意义；单用 swap 只是让体验“可接受”，不加快实际加载