Iconfont在教育平台的实践
本文作者：IMWeb bleanycao 原文出处：IMWeb社区 未经同意，禁止转载
Iconfont 体系化解决方案
背景
性能优化是前端开发不得不面对，必须重视的一个经久话题。教育平台项目除了常规的web性能优化外，图片资源站到了流量的70%+，因此图片的性能优化是个重中之重。除了常规的图片优化外，课程封面和机构上传的图片采用了webp格式，之前已介绍过，不再赘述。这样，对平台图片的优化已经达到极致了吗？
随着平台规模的不断扩大，我们发现/img/目录的小图标越来越多，已经达到了700+多个，这么多图标真的都是必须的吗？
从上面这张图可以看到，以箭头为例，不同颜色、不同大小的达到几十张，为了适配不同场景，而这些一个矢量图就可以轻松搞定。
矢量图，两个方案，svg和iconfont。svg雪碧图只兼容IE9+，而平台仍需要支持IE8的用户，为了避免矢量图和位图两套方案，选择了兼容性更好的iconfont，可以完美兼容到IE6。
适用场景及大小对比
- 矢量图，缩放不失真，代替不同大小、颜色的多icon
- 单色icon（支持CSS3渐变色）
- 平台有
319个图标（共655KB）适合做iconfont
图片与iconfont大小对比：
很明显，合并后的iconfont只有之前图片雪碧图的8%，不足10KB。
体系化解决方案
iconfont效果明显，业务场景适用，我们到底该如何使用？市面上已经有很多iconfont的平台，上传svg转化为字体文件，可下载查看demo，copy样式到代码中，但是存在几个问题：
- content不固定，当修改或删除某些icon时，所有content值改变，需手工整站修改
- 需手工下载demo，copy修改。流程繁琐，未与构建工具打通自动化 鉴于此，我们自己实现了一套体系化的解决方案，开发只需要在html中引入class名，其余一切自动化实现，分分钟帮你搞定。perfect！ 流程如下：
使用效果
与图片效果一致
遇到的一些问题
svg图标绘制
虽然目前线上有很多这种图标，但是为了我们平台的图标统一性和可沉淀，我们选择了自己绘制图标。
在选择绘制图标大小上有了几次尝试，因为图标大多数是12px/16px/24px/32px/48px，最后我们经过多次测试确认绘制的svg大小为480px，左右留白30px这个标准
字体跨域问题
这个是遇到的最简单的一个问题，之前也研究过，设置cors即可:
Access-Control-Allow-Origin: *对齐问题
是字体都会涉及到行高问题，icon font当然也不例外，默认我们设置line-height: 1;，在垂直对齐的时候先使用vertical-align，如果不行，我们就用绝对定位。
锯齿，锯齿，还是锯齿
虽然icon font很大程度上减少了资源大小，节省了开发工作量，一定程度上也优化了代码，并形成一个新的可遵循的规范，但目前它的表现还不是那么完美，离图片还是有点距离的
- ie8浏览器对圆形的icon font支持不友好，如果字体比较小会有明显的锯齿，字体超过20px就会有所改善，因为这个只好把所有圆形的图标都换成图片了
- 低端的pc机上，icon font渲染不好，有一定程度的锯齿，chrome也不例外
- 有一定的虚边，这个跟字体本身有关系，所有的文字字体渲染都有一定的虚边
兼容问题
网上和iconfont.cn给出的推荐写法是：
[@font-face](/user/font-face) {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */} 但是经过实测，IE9已支持.woff，iOS4.1-几乎没有用户，因此优化为：
[@font-face](/user/font-face) {
font-family: 'iconfont';
url('fonts/webfont.eot?-7drjga') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/webfont.woff?-7drjga') format('woff'), /* IE9+、chrome、firefox */
url('fonts/webfont.ttf?-7drjga') format('truetype');/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
｝同时要注意书写顺序，如果.ttf在.woff之前，则chrome会同时下载这两个文件，而其他浏览器则只下载自己认识的字体文件。
遗留问题
- IE8中，如果字体文件加载失败，则整个页面空白，虽然其他资源正常加载，逻辑正常运行。
- iOS、Andriod中，字体文件或阻碍其他资源下载。 因此，针对这两种情况需要特殊处理，采用lazyload方式，避免影响正常业务逻辑。
最后icon font要想真的替换所有图片，还需要浏览器进一步进化。期待美好的那一天到来！！！