iconfont的一次踩坑记录

• 项目场景
• 问题描述
• 原因分析：
• 解决方案：

项目场景

公司某系统项目使用iconfont，图标显示异常

---

问题描述

UI创建提供iconfont库，前端引入并使用后发现显示的图标并非库中图标。

@font-face {
  font-family: '';  /* project id 2496030 */
  src: url('XXXXXXXX');
  src: url('XXXXXXXX') format('XXXXXXXX'),
  url('//at.alicdn.com/t/font_XXXXXXXX.woff2') format('woff2'),
  url('//at.alicdn.com/t/XXXXXXXX.woff') format('woff'),
  url('//at.alicdn.com/t/XXXXXXXXg.ttf') format('truetype'),
  url('//at.alicdn.com/t/XXXXXXXX') format('svg');
}
.iconfont{
    font-family:"iconfont";
    font-size:1.5rem;
    font-style:normal;
}

应这样显示：

实际显示成了这样

---

原因分析：

第一步：以为是库冲突，但是该项目并没有引入其它iconfont库，并且重新创建一个html 单独引入该图标库仍然存在该问题。因此排除一切冲突可能。

第二步：在将该库中选三个图标引入自己创建的iconfont库中，可正常引入并使用，排除图标本身存在问题。
最后：认真研究iconfont.css和在线引入的代码，对比之，发现其@font-face中缺少font-family配置项

---

解决方案：

在@font-face中手动添加为font=family:“iconfont”，
或联系该iconfont库管理员对项目信息进行修改，配置font-family，重新引入项目。

，至此图标库中内容可正常引入使用并显示。

标签：记录,XXXXXXXX,format,iconfont,url,font,图标
来源： https://blog.csdn.net/cxy853480896/article/details/116060454