图标字体加载失败主因是路径错误或跨域限制，需检查@font-face中src的相对路径基准、CORS头配置及font-display策略；其次为font-family名称不匹配、Unicode转义错误及字体加载时机问题。
font-face 引入路径错误或跨域限制
图标字体文件（如 iconfont.woff2、iconfont.ttf）加载失败是最常见原因。浏览器控制台若出现 Failed to load resource: net::ERR_ABORTED 或 CORS error，基本可锁定为路径或权限问题。
- 检查
@font-face中src的 URL 是否为相对路径，且相对于 CSS 文件位置而非 HTML 页面位置 - 本地开发时直接双击打开 HTML 会触发
file://协议下的字体跨域拦截，必须通过本地服务器（如python3 -m http.server）访问 - CDN 引入时确认字体域名是否在服务端设置了
Access-Control-Allow-Origin: *，否则 Firefox/Chrome 会静默拒绝加载
font-family 名称不匹配或未生效
即使字体文件加载成功，font-family 名称拼写错误、引号缺失或 CSS 优先级覆盖也会导致图标无法渲染。注意：字体名是区分大小写的，且不能依赖文件名推断。
-
@font-face中的font-family: 'iconfont'必须与后续font-family: 'iconfont'完全一致（包括引号类型和空格） - 避免在选择器中写成
font-family: iconfont（无引号），当名称含空格或特殊字符时会解析失败 - 用浏览器开发者工具的「Computed」面板查看元素最终应用的
font-family值，确认是否被其他样式（如全局重置）覆盖
Unicode 字符未正确转义或编码不一致
使用 Unicode 方式调用图标（如 \e601）时，HTML 文档编码、CSS 编码、字体文件内码点三者必须对齐。常见表现是显示方框、问号或空白。
