图标字体加载失败主因是路径错误或跨域限制，需检查@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 编码、字体文件内码点三者必须对齐。常见表现是显示方框、问号或空白。
- 确保 HTML 文件声明了 UTF-8：
<meta charset="UTF-8"> - CSS 中 Unicode 转义必须用反斜杠 + 小写十六进制，如
content: "\e601"，不能写成content: ""（直接粘贴字符易因编辑器编码出错） - 检查字体文件是否真的包含该码点——用字体查看工具（如 FontForge）打开
iconfont.ttf，搜索对应 Unicode 值
字体加载时机与 display 属性冲突
图标字体可能异步加载完成，而 DOM 渲染早于字体就绪，尤其在首次访问或网络较慢时。此时即使样式正确，也会短暂或永久显示为默认字体中的占位符。
立即学习“前端免费学习笔记（深入）”；
- 避免设置
font-display: optional，推荐用font-display: swap保证内容及时可见 - 不要给图标元素设
visibility: hidden或opacity: 0等隐藏样式后靠 JS 显示，这会干扰字体加载检测逻辑 - 如需精确控制，可用
document.fonts.load()监听加载完成，但注意兼容性（IE 不支持）
@font-face {
font-family: 'iconfont';
src: url('./fonts/iconfont.woff2') format('woff2'),
url('./fonts/iconfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
实际项目里最容易被忽略的是字体路径的上下文基准和 font-display 的取舍——前者导致本地能跑线上炸，后者让图标在弱网下彻底消失。 
