iconfont的一次踩坑记录:图标显示异常

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的一次踩坑记录:图标显示异常

实际显示成了这样iconfont的一次踩坑记录:图标显示异常


原因分析:

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

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

iconfont的一次踩坑记录:图标显示异常


解决方案:

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

iconfont的一次踩坑记录:图标显示异常
,至此图标库中内容可正常引入使用并显示。

上一篇:线程底部实现原理 静态代理 小例子婚庆公司


下一篇:将c#的datetimepicker值存储到mysql数据库中