字体图标加载失败主因是路径错误、file://协议限制或font-family不匹配。需检查fonts/目录存在性、css中@font-face的src路径是否正确、font-family名称是否与html类名一致，并确保通过http服务（非双击）访问页面。
字体图标文件路径是否正确指向了 fonts/ 目录
浏览器控制台报 Failed to load resource: net::ERR_ABORTED 且 URL 明显指向类似 /fonts/iconfont.woff2 的路径，基本就是路径错了。常见原因是把图标字体文件（iconfont.woff2、iconfont.ttf 等）放在了错误位置，或 CSS 中的 @font-face 的 src 路径没和实际部署结构对齐。
实操建议：
- 检查
index.html所在目录下是否存在fonts/子目录，并确认其中包含全部字体文件（注意大小写，Windows 不敏感但 Linux/Nginx 敏感） - 打开引用的 CSS 文件（比如
iconfont.css），找到@font-face块，核对src: url('...')中的路径：如果 CSS 和 HTML 同级，路径应为相对路径如url('./fonts/iconfont.woff2')；若 CSS 在css/目录下，则需回退一级：url('../fonts/iconfont.woff2') - 直接在浏览器地址栏访问该字体 URL（如
http://localhost:8080/fonts/iconfont.woff2），看能否下载——打不开就说明服务没托管或路径错
CSS 中 @font-face 的 font-family 名是否与 HTML 中 class 一致
即使字体文件加载成功，图标仍显示为方块或空心矩形，大概率是 CSS 没“认出”这个字体族。典型表现是开发者工具里元素的 font-family 计算值中没有你声明的图标字体名。
实操建议：
- 检查
@font-face规则中的font-family值（如'iconfont'），必须和你在 HTML 元素上写的class="iconfont icon-home"中的iconfont类所对应的font-family: 'iconfont'完全一致（包括引号、空格、大小写） - 确认图标类（如
.icon-home）确实设置了font-family: 'iconfont'，且没有被其他样式覆盖（用开发者工具检查 computed 样式） - 避免多个
@font-face声明使用相同font-family却指向不同文件——浏览器可能加载了旧版或损坏的字体
本地开发时未启用 HTTP 服务，直接双击打开 index.html
Chrome、Edge 等现代浏览器出于安全策略，默认禁止 file:// 协议下加载 woff2、woff 等字体资源，控制台会报 Access to font at 'file:///.../iconfont.woff2' from origin 'null' has been blocked。
实操建议：
- 绝对不要双击打开
index.html测试图标——哪怕页面其他内容正常显示，字体也必然失败 - 用轻量 HTTP 服务启动：VS Code 安装
Live Server插件后右键 → “Open with Live Server”；或命令行执行npx http-server（需全局安装http-server）；Python 用户可用python3 -m http.server 8000 - 确认地址栏 URL 是
http://开头，而非file:///
字体文件本身损坏或未包含所需 Unicode 字符
部分图标显示为空白，但其他正常，或者所有图标都变成同一个符号（如 ），可能是字体文件导出时漏选了对应图标，或 CSS 中伪元素的 content 值与字体映射不匹配。
实操建议：
- 用字体查看工具（如 FontForge、在线的 fontdrop.info）打开
iconfont.woff2，确认里面是否真有你要的 Unicode 码位（例如\e601） - 检查 CSS 中图标的
content值，如.icon-home:before { content: '\e601'; }，确保该码位存在于字体中，且没被其他字符覆盖 - 如果用的是 iconfont.cn 下载的项目，重新进入项目页 → “下载至本地”，勾选全部图标再下载，避免因筛选导致字体子集缺失
file:// 协议下字体根本不会加载——这点连很多老手也会临时掉坑里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
