字体图标显示为方块或问号，主因是@font-face引用的字体文件未加载成功：先查network中字体请求是否404（路径错误）、blocked（file://协议或混合内容）、无cors头（跨域静默失败），再验format()拼写、多格式fallback、font-family与调用完全一致，且启用font-display:swap。
字体图标显示为方块或问号，基本不是 class 写错了，而是 @font-face 声明的字体文件压根没加载进来——哪怕 CSS 文件 200 加载了，url() 指向的 .woff2 返回 404 或被跨域拦截，图标照样不出现。
检查 Network 面板里字体请求是否 200
打开 DevTools → Network → 刷新页面 → 筛选 font 或 woff2。重点看三件事：
-
status是 404？说明路径错，比如 CSS 里写url("./fonts/iconfont.woff2")，但部署后fonts/目录不在 CSS 同级位置 -
status是 403 或blocked:mixed-content？说明协议不一致（HTTP 页面加载 HTTPS 字体）或 CDN 未配权限 -
status是 200 但图标仍不显示？点开该请求，看响应头里有没有Access-Control-Allow-Origin；没有就属于跨域静默失败
确认 @font-face 中的 src 路径和格式是否合理
相对路径以 CSS 文件位置为基准，不是 HTML；单写一种格式（如只提供 .woff2）在旧浏览器或某些环境会失效。建议：
- 改用绝对路径，例如
src: url("/fonts/iconfont.woff2") format("woff2") - 按兼容性顺序提供多格式：
woff2→woff→ttf→eot（仅需兼容 IE9-） - 确保
format()参数拼写正确：format("woff2")不是format("woff 2")或format("web-open-font-format-2") - 本地开发时别用
file://协议打开 HTML，Chrome 会直接禁用字体加载；换http-server或live-server
CDN 场景下必须同时满足三个条件
只把 CSS 放 CDN，字体文件没同步上传或没配 CORS，图标必然挂掉。缺一不可：
- CDN 域名必须返回
Access-Control-Allow-Origin响应头（值建议填具体域名，不用*） - CSS 里的
@font-face必须显式加crossorigin: anonymous，否则浏览器默认以非 CORS 模式发起请求，服务端 header 就白配了 - 字体文件本身得真实存在于 CDN 路径上，且缓存已刷新（部分 CDN 对
.woff2有路径误判，加?v=1可绕过）
font-family 和 content 值是否完全匹配
即使字体加载成功，图标仍可能不显示，因为渲染链断在下游：
-
@font-face里写的font-family: "iconfont"，调用时必须严格一致：不能少引号、不能大小写错、不能漏空格 - HTML 中用类名方式（如
<i class="icon-home"></i>），要确认 CSS 里真有.icon-home:before { content: "\e601"; }这条规则 - Unicode 值必须是小写十六进制加反斜杠，
content: "\e601"有效，content: ""（直接粘贴字符）易因编辑器编码出错 - 所有 CSS 文件首行加
@charset "UTF-8";，避免 BOM 或 GBK 编码破坏转义
最容易被忽略的是：字体加载完成前，DOM 已经渲染完毕，而 font-display: optional 会让浏览器干脆跳过加载；生产环境务必用 font-display: swap，并接受短暂的 FOUT（Flash of Unstyled Text）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
