浏览器不显示woff2字体主因是file://协议限制、路径计算错误或缺少woff备用格式。需用本地HTTP服务预览，确保CSS中url路径相对于CSS文件位置，且src声明包含woff2和woff双格式，并严格匹配font-family名称大小写与引号。
浏览器不显示woff2字体，基本不是“没加载”，而是加载失败后静默回退到系统字体——你看到的黑体、方块或默认 sans-serif，其实是 fallback 行为，不是样式没生效。
Network 里字体请求状态码是 0 或 (failed)
这是 file:// 协议限制的典型表现。百度浏览器、Chrome、Edge 等对本地双击打开的 HTML 文件执行严格策略：直接访问 file:///path/to/index.html 时，@font-face 中的 url('./fonts/icon.woff2') 会被拦截，Network 面板里该请求状态显示为 0 或 (failed)，Headers 为空，控制台通常无报错。
- 必须用本地 HTTP 服务预览：比如
python3 -m http.server 8000、Vite 的npx vite、VS Code 的 Live Server 插件 - 不要依赖“右键 → 在浏览器中打开”，一律通过
http://localhost:xxx/访问 - 确认服务器返回的 Content-Type 是
font/woff2，不是text/plain或空值（Nginx/Apache 需显式配置 MIME 类型）
src 中的 url 路径相对于 CSS 文件位置计算
路径写错是最高频原因。浏览器解析 url('./fonts/icon.woff2') 时，基准是 CSS 文件的物理位置，不是 HTML 所在目录。
- 假设 CSS 文件在
/static/css/app.css，字体在/static/fonts/icon.woff2，则必须写url('../fonts/icon.woff2') - 写成
url('/fonts/icon.woff2')会让浏览器尝试请求http://localhost/fonts/icon.woff2（根路径），而非项目内真实路径 - 复制 Network 面板中字体请求的
Request URL，粘贴到新标签页直接访问——打不开就说明路径或服务器权限有问题
只提供 woff2 格式，旧版浏览器或定制内核直接跳过
百度浏览器部分定制版本（尤其基于 Chromium 115 但阉割了 woff2 解码模块的）可能识别 format('woff2') 但无法解码，且因没有 fallback 格式而彻底放弃加载。
立即学习“前端免费学习笔记（深入）”；
- 必须补上
.woff作为第二选择：src: url('icon.woff2') format('woff2'), url('icon.woff') format('woff'); - 避免只写一种格式；顺序很重要，浏览器按从左到右取第一个支持的格式
- 确认字体文件本身不含 local() 引用（如
local('MiSans')），百度浏览器会直接忽略含local()的整条src声明
font-family 名称大小写或引号不一致
声明和调用名称差一个字符，字体就永远不会被选用。这不是兼容性问题，是匹配失败。
-
@font-face里写的是font-family: 'MiSans'，调用时就必须是font-family: 'MiSans', sans-serif;—— 不能漏引号、不能写成MiSans（无引号）、也不能写成'misans'（大小写错） - 用开发者工具 Elements → Computed 面板查看实际生效的
font-family值，确认是否命中自定义名 - 字体文件内部的 PostScript Name（如
MiSans-Regular）和你声明的font-family无关，别混淆
真正卡住人的往往不是技术多复杂，而是路径基准误判、file:// 协议限制被忽略、或者以为“只要 woff2 能跑就行”——这三处出错，浏览器连试都不试，直接 fallback。
