摘要：
　　看官知道阿里iconfont矢量图标库吗？如果看官从事web前端工作，艺灵建议看官接触下iconfont，真的很方便。但是，对于里面提供的基线调整问题，在调整前一定要备份啊，因为......

此时此刻，艺灵的心情错综复杂、欲哭无泪、满眼绝望、我都不知道自己在键盘上敲打了什么......

一、事情是这样的

话说上次我们的技术总监@子心让我了解了阿里的iconfont后，后来制作页面时，啥小图标我都不用了，全用阿里的iconfont，因为这玩意儿太过强大了，而且与图片相比，有太多的好处。至于无关的话题这里就不带说了，如果看官有兴趣，可以去→→阿里iconfont官网做详细的了解。

由于平日里自己一直使用着iconfont矢量图标，所以在官网上自然也就创建有项目。有一次，无意间看到了这样一句话：iconfont调整了基线位置详情点此了解 。如果发现老项目icon有所偏移请点此处理。如图：　然后艺灵好奇的点击了一下，并及时下载了最新版本的项目到本地，发现图标确实有一点小变化，好像布局更理想了一些，至少在当时是这样的。

后来，每次添加图标后艺灵都习惯性的更新一下基线，一直没有发现隐藏的问题。

随着时间的推移，项目中的图标越来越多。这段时间又赶上公司全面改版网站，我又再次用上了了iconfont，然后悲剧出现了......

二、更新基线后的悲剧

在做轮播特效的时候，用到了左右箭头。很顺利的利用iconfont完成了效果，但同事在360安全浏览器8.1版本的极速模式下却发现图标跑偏了，不仅如此，基本上所有图标都跑偏了！！！上图一张：　除了360安全浏览器外，部分浏览器上也出现了异常；当切换成ie兼容模式就正常了，我当时就懵圈了。这坑，真是作孽啊！！！......

经过一翻不断测试与折腾后终于找到了原因：iconfont基线的问题。线上没有更新的页面都正常，本地更新后的在某些浏览器中出现异常。

既然找到了问题，那就解决呗，可这个iconfont并没有回退的按钮，也没有往期备份的记录，至少我已经找了半小时了......

现在看看项目中的几百个图标，本来打开利用名称来进行搜索还原一份的，结果这搜索功能，那叫一个坑啊！！！

为今之计，只能全部重新找了，哎，真是日了狗了！

下面艺灵将献上实际demo供看官以此为鉴，升级前一定要备份！！！

三、因更新基线导致异常的demo演示

3.1、相关资源

demo演示

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-09-22/437.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。