字体图标乱码主因是浏览器未加载到字体文件，需按路径→格式→名称→编码四步排查：检查CSS中@font-face路径是否正确（相对CSS文件）、格式是否齐全（woff2/woff/ttf/eot）、font-family名是否完全一致、Unicode编码是否匹配字体真实glyph。
字体图标乱码，多数是 @font-face 中的路径写错、格式不匹配，或未正确声明字体族名导致的。核心问题不在“乱码”本身，而是浏览器没加载到可用字体文件，回退到了系统默认字体（比如显示方块、问号或小方框）。
检查字体文件路径是否正确
路径错误是最常见原因。注意以下几点：
- 路径必须相对于 CSS 文件所在位置，不是 HTML 页面位置
- 推荐使用相对路径，如：
url('./iconfont.woff2')；避免绝对路径或根路径（/fonts/iconfont.woff2）除非你确认部署结构一致 - 检查浏览器开发者工具（Network 标签页），看字体文件是否返回 404 或 403 —— 这说明路径或权限有问题
- 路径中不要有多余空格、中文、特殊符号；大小写敏感（尤其在 Linux 服务器上）
确保引入了兼容性足够的字体格式
不同浏览器支持的字体格式不同，只提供一种格式容易失败。建议按优先级顺序写全：
-
woff2：现代浏览器首选（体积小、加载快） -
woff：主流兼容（Chrome、Firefox、Safari、Edge 基本都支持） -
ttf或eot：仅用于老版 IE（如 IE9），可选加
完整示例：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'iconfont';
src: url('./iconfont.eot'); /* IE9 */
src: url('./iconfont.eot?#iefix') format('embedded-opentype'),
url('./iconfont.woff2') format('woff2'),
url('./iconfont.woff') format('woff'),
url('./iconfont.ttf') format('truetype');
font-display: swap;
}确认 font-family 名称与使用处完全一致
CSS 中定义的 font-family 名称，和你在类名或伪元素中写的必须一字不差（包括引号、空格、大小写）：
- 定义时：
font-family: 'iconfont'; - 使用时：
.icon-home { font-family: 'iconfont'; }或content: '\e601'; - 别写成
font-family: iconfont;（不加引号在含空格或特殊字符时会出错） - 也别混淆字体名和文件名（
iconfont.woff2≠ 字体族名iconfont）
验证 Unicode 编码与字体映射是否匹配
如果路径、格式、名称都对，但还是显示方块，可能是图标编码没对应上字体里的真实 glyph：
- 用字体查看工具（如 FontForge、在线的 fontdrop.info）打开你的
.woff2文件，确认\e601这个 Unicode 确实存在且对应正确图标 - 部分图标库（如阿里 iconfont）生成的代码里，
content值可能带前缀（如），CSS 里要用转义写法'\e601'，不能直接写 HTML 实体 - 确保 CSS 中该类设置了
font-style: normal; font-weight: normal;，避免被继承样式干扰渲染
基本上就这些。乱码不是玄学，按路径 → 格式 → 名称 → 编码四步排查，90% 能解决。
