字体文件404或返回0字节是最常见问题，需通过Network面板筛选Font查看状态码；若为404，说明src路径错误（相对CSS文件位置计算）；若为0或failed，多因file://协议禁用加载，须启用本地服务；同时检查Content-Type是否正确（如font/woff2），并确认@font-face语法无误（format值须为标准关键字、无悬空逗号、font-family名称严格一致）。
字体文件404或返回0字节
这是最常见也最容易验证的问题：浏览器根本没拿到字体文件。打开开发者工具的 Network 面板，筛选 Font，刷新页面，看对应 .woff2、.woff 或 .ttf 请求的状态码。
若显示 404，说明路径错了——src: url() 中的路径是相对于 CSS 文件位置计算的，不是 HTML 所在目录。比如 CSS 在 /css/app.css，字体在 /fonts/inter.woff2，就得写 url('../fonts/inter.woff2')。
若状态码为 0 或显示 (failed)，大概率是用 file:// 协议双击打开 HTML（尤其百度浏览器、旧版 Edge），此时所有字体加载被禁止。必须起本地服务，例如用 npx http-server 或 VS Code 的 Live Server 插件。
- 右键点击 Network 中的字体请求 → “Open in new tab”，直接访问该 URL，确认能否下载
- 检查服务器是否返回正确的
Content-Type：.woff2必须是font/woff2，.ttf应为font/ttf或application/font-sfnt - Vite、Webpack Dev Server 默认支持字体 MIME 类型；Nginx 需在
mime.types中补全，Express 需手动res.set('Content-Type', 'font/woff2')
@font-face 声明语法错误
语法错一个字符，整个 @font-face 规则就静默失效，尤其 Safari 和旧 Chrome 不报错也不加载。
立即学习“前端免费学习笔记（深入）”；
典型错误包括：format('ttf') 写成 'ttf'（正确是 'truetype'）；src 末尾多一个逗号；font-family 名称在声明和调用时不一致（大小写、空格、引号缺一不可）。
正确写法示例：
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
src: url('../fonts/inter-v3.woff2') format('woff2'),
url('../fonts/inter-v3.woff') format('woff'),
url('../fonts/inter-v3.ttf') format('truetype');
}
-
format()参数必须用 W3C 标准关键字：'woff2'、'woff'、'truetype'、'opentype' -
src列表里不能有悬空逗号（即最后一项后面不加逗号） -
font-family值建议全用英文引号包裹，避免中文字体名解析歧义
字体加载了但页面没显示
Network 显示字体返回 200，Computed 面板里 font-family 却没生效——问题不在加载，而在“匹配”或“覆盖”。
先检查元素的 Computed font-family 值，看最终生效的是什么。如果显示的是系统默认字体（如 Times New Roman），说明自定义字体没被选中。
- 确认调用处写的
font-family和@font-face中声明的名称**完全一致**（包括引号、大小写、空格） - 避免在
font-family回退链中写无效字体名，例如"Helvetica Neue", "PingFang SC", sans serif（sans serif缺连字符，会中断回退） - 检查是否有更高权重的样式覆盖，比如
!important、内联样式、更具体的选择器（如body pvsp） - 某些框架（如 Tailwind）会重置全局
font-family，需显式在body或根元素上再声明
首屏白屏或字体闪动
即使字体能加载，没设 font-display 就等于把渲染卡在字体上——现代浏览器默认行为是阻塞 3 秒后才 fallback，用户看到空白或突兀替换。
必须显式设置：font-display: swap 是最安全选择，立即用系统字体渲染，加载完自动替换；font-display: optional 适合非关键字体（如装饰性标题），网络慢时直接跳过。
-
swap能解决首屏白屏，但可能引发 layout shift（文字变宽/窄） - 不要用
block（长时间空白）或fallback（限制太死），除非有强品牌一致性要求 - Canvas 中使用自定义字体时，需提前在 DOM 中声明一次该字体（例如隐藏的
<span style="font-family:'Inter'"></span>），否则 Canvas 可能无法识别已加载字体
真正麻烦的不是“怎么加”，而是“加在哪、怎么查、谁在干扰”。字体问题往往跨协议、跨格式、跨层叠，单点修复容易漏掉上下文。尤其要注意：路径基准永远是 CSS 文件位置；font-display 不是可选项；format() 字符串错一个字母就等于没写。
