17370845950

字体图标不显示主因是字体文件加载失败或CSS类名错误，需检查@font-face路径、格式兼容性、跨域限制及HTML类名匹配，并确保使用本地服务器预览。

字体图标不显示，多数情况是字体文件未正确加载或 CSS 类名使用错误。核心问题通常出在 @font-face 声明路径、字体格式兼容性、跨域限制，或 HTML 中未正确添加对应类名。

检查 @font-face 的 src 路径是否正确

确保字体文件（如 .woff2、.woff、.ttf）路径可访问。相对路径需以 CSS 文件位置为基准，不是 HTML 页面位置。

• 推荐优先使用绝对路径，例如：url('/fonts/iconfont.woff2')
• 在浏览器开发者工具的「Network」标签中搜索字体文件名，确认状态码是 200；若为 404，说明路径错误
• 避免使用 ../ 过多层级，容易出错；可将字体文件放在与 CSS 同级的 fonts/ 目录下统一管理

确认字体格式和浏览器兼容性

现代浏览器优先支持 .woff2，但旧版 IE 需要 .eot，Safari 有时对 .ttf 更友好。建议按规范顺序声明多种格式：

@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-display: swap 可避免图标闪动或长时间空白

验证 CSS 类名与 Unicode / 字符映射是否匹配

字体图标库（如 iconfont.cn）生成的 CSS 通常包含两部分：一是 @font-face，二是类似 .icon-home::before { content: "\e601"; } 的规则。

• 确保 HTML 元素同时拥有字体族和图标类，例如：
• 检查该类是否真正在 CSS 中定义了 ::before 伪元素 + content 值
• 如果手动复制了图标 Unicode（如 \e601），需确认它和字体文件中的字符一一对应；建议直接用官网下载的完整 CSS，不要只截取部分

排查跨域与 Content-Type 问题

若字体文件部署在 CDN 或不同域名下，需服务端配置 CORS 头，否则 Chrome/Firefox 会拒绝加载：

• 响应头应包含：Access-Control-Allow-Origin: *（或指定域名）
• 检查服务器是否正确返回字体 MIME 类型，例如：font/woff2，而非 text/plain
• 本地开发时（file:// 协议）也会因安全策略阻断字体加载，务必用本地服务器（如 Live Server、http-server）预览