字体图标不显示的主因是@font-face路径错误、font-family名不匹配或content的Unicode值错误，需检查Network中字体加载状态、字体文件家族名及CSS编码格式。
字体文件没加载成功，@font-face 路径或格式出错
字体图标本质是字符，靠 @font-face 加载的自定义字体渲染。如果图标不显示，第一反应不是 CSS 写错了，而是字体压根没加载进来。
检查浏览器开发者工具的 Network 标签页，筛选 font，看对应字体文件（如 iconfont.woff2）是否返回 200，路径是否 404。
常见问题：
-
src中路径写成相对路径但实际部署后结构变了，建议统一用绝对路径（如/static/fonts/iconfont.woff2） - 漏写
woff2格式——现代浏览器优先用它，但若只提供ttf且未 fallback，部分环境会失败 - 服务器未配置字体 MIME 类型，Nginx 需添加：
types { font/woff2 woff2; font/woff woff; }
font-family 名字对不上，CSS 和字体文件元数据不一致
字体图标能显示的前提是：HTML 元素的 font-family 值，必须和 @font-face 中定义的 font-family 属性值**完全一致**（包括大小写、空格、引号）。这个值不是文件名，而是字体内部的“家族名”，由字体生成工具（如 iconfont.cn）写死在字体文件里。
验证方法：
立即学习“前端免费学习笔记（深入）”；
- 用字体查看工具（如 FontForge）打开
.ttf文件，查 Name Table → Family Name - 在 CSS 里用该名称，比如生成工具给的是
"iconfont"，那就必须写font-family: "iconfont";，不能写成iconfont（无引号）或"IconFont"（大小写错） - 多个字体声明时注意权重：
font-family: "iconfont", "Helvetica Neue";—— 前者必须匹配，否则直接跳到后者，图标就变成方块
content 的 Unicode 值写错或编码不匹配
字体图标靠伪元素 ::before 的 content 插入 Unicode 字符，比如 \e601。这个值必须和字体文件中该图标的实际码点一致，且 CSS 文件保存编码需为 UTF-8（无 BOM）。
容易踩的坑：
- 复制粘贴图标代码时，把
\e601错写成（这是 HTML 实体，CSS 里无效） - 用在线平台生成的 CSS，但本地没更新对应字体文件，导致码点存在但字体里没这个字形
- 编辑器保存为 GBK 编码，
content: "\e601"被破坏，建议所有 CSS 文件显式声明@charset "UTF-8";在首行 - Unicode 值带空格或换行（比如复制时多了一个回车），
content会解析失败
图标显示为方块或问号，但字体和 content 都看似正确
这通常意味着字符被渲染了，但字体没把它当成图标字形处理。原因常藏在字体特性或 CSS 继承上：
-
font-weight或font-style被继承改变，而字体文件只包含normal/normal变体；加一句font-weight: normal; font-style: normal;强制重置 - 父元素设置了
text-rendering: optimizeLegibility，某些浏览器会干扰图标渲染，可局部设为auto - 使用了
unicode-range但范围没覆盖到你的图标码点，检查@font-face是否限制了unicode-range: U+e600-U+e6ff，而你用了\e700 - 图标元素被设置了
transform: scale()或zoom，在旧版 Safari/IE 下可能触发字体回退
@font-face {
font-family: "iconfont";
src: url("/static/fonts/iconfont.woff2") format("woff2"),
url("/static/fonts/iconfont.woff") format("woff");
font-weight: normal;
font-style: normal;
unicode-range: U+E600-E6FF;
}
.icon-home::before {
font-family: "iconfont";
content: "\e601";
font-weight: normal;
font-style: normal;
}
字体图标的问题，90% 出在路径、family 名、Unicode 三者之一不闭环；剩下 10% 是渲染上下文干扰。别急着换库，先打开 Network 和 Elements 面板，盯住那三个点。 
