字体文件404需检查@font-face的src路径是否正确，包括相对路径计算、绝对路径斜杠、构建工具输出目录；format声明须与实际文件类型严格匹配；还需排查css覆盖、csp拦截、unicode码点缺失等问题。
字体文件路径是否 404
浏览器控制台里看到 Failed to load resource: the server responded with a status of 404 ()，基本就是 @font-face 中的 src 路径写错了。常见错误包括：
- 相对路径没算对当前 CSS 文件位置（比如 CSS 在
/css/style.css，但字体放在/fonts/icon.woff2，却写了url(../fonts/icon.woff2)） - 用了绝对路径但漏了开头斜杠（
/fonts/icon.woff2✅ vsfonts/icon.woff2❌） - 构建工具（如 Webpack/Vite）把字体输出到了别的目录，而 CSS 里还引用着原始路径
打开浏览器「Network」标签页，筛选 Font 类型，点开图标字体请求，看状态码和响应头。如果返回 404，直接修正 src 地址；如果是 200 但字体仍显示方块，继续往下查。
@font-face 的 format 声明是否匹配实际文件类型
format() 只是提示浏览器“这是什么格式”，不校验内容。但如果声明和真实文件不一致，某些浏览器（尤其是旧版 Safari 或 IE）会拒绝加载。
例如你实际提供的是 .woff2 文件，但写成：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'iconfont';
src: url('./icon.woff2') format('woff');
}就可能失效。应严格对应：
-
.woff2→format('woff2') -
.woff→format('woff') -
.ttf→format('truetype') -
.eot→format('embedded-opentype')
现代项目建议优先用 woff2，并 fallback 到 woff，避免只写一种格式导致兼容问题。
字体是否被其他 CSS 规则覆盖或拦截
即使字体加载成功，也可能因以下原因显示方块：
- 元素上设置了
font-family: 'iconfont', sans-serif，但sans-serif优先级更高（比如漏写了引号，变成font-family: iconfont, sans-serif，浏览器会当字族名查找失败后直接降级） - CSS 中有
font-display: optional且字体加载慢，浏览器跳过渲染（可临时改成swap测试） - Content Security Policy（CSP）限制了
font-src，导致字体被拦截（检查控制台是否有Refused to load font类错误） - 字体文件本身不包含你要用的 Unicode 码点（比如你用
\e601，但字体生成时没打包这个 glyph）
用浏览器「Elements」面板选中图标元素，看「Computed」里的 font-family 是否命中你的图标字体，再点开「Rendered Fonts」确认实际使用的字体文件名。
字体文件是否损坏或编码不匹配
有些图标字体（如老版本 Iconfont 下载包）用的是私有 Unicode 区域（U+F000–U+F8FF），但 CSS 里写的伪类内容是十进制或 HTML 实体，容易出错。
比如本该写：
.icon-home::before {
content: '\e601';
}却误写成：
.icon-home::before {
content: ''; /* 直接粘贴乱码字符，编码可能错位 */
}或者用了 HTML 实体但没转义： 在 CSS 里无效，必须用 \e601。
验证方法：用字体查看工具（如 FontForge、在线的 fontdrop.info）打开 .woff2 文件，确认你要用的码点确实存在且有图形。
方块问题最常卡在路径和 format 声明，但真正难排查的是字体内容本身缺失——别急着重引 CSS，先确认那个 Unicode 码点在字体里有没有。
