字体图标不显示的主因是@font-face路径错误、font-family名不匹配或content的Unicode值错误，需检查Network中字体加载状态、字体文件家族名及CSS编码格式。

css 字体图标不显示怎么办_font-family 与 content 检查 第1张

字体文件没加载成功，@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 面板，盯住那三个点。