之前写过一篇关于雪碧的博文。评论里说用http2，或者用SVG，也有的说用iconfont代替。每个人的知识面都比较广，但是对技术点有深刻理解的人好像并不多，不然不会出现过时无用的精灵，换成http2或者图标字体就好了；http2有时间会写一篇博文，谈谈个人的实践和理解。本文主要讲的是图标字体（iconfont）的技术要点，从实践开发的角度讲述个人对图标字体的理解。1.iconfont使用场景（优缺点）；一般我们的项目在决定使用一个技术点之前，都会查阅相关资料，对它有个大概的了解。比如这次我会使用iconfont来实现功能，在了解了相关资料后，总结总结一下它的优缺点以及它的使用场景。图标字体的优缺点：1、优点：轻巧（文件体积小）、灵活（图标可以改变样式）、兼容性好（IE8+）。2.缺点；图标只能是单色的（太复杂的多色图标无法实现），生成图标字体需要时间。和webfont一样，iconfont实现的关键代码是“@font-face”（具体讨论CSS@fontface）。查看其浏览器兼容性信息为IE8+：低版本浏览器其实是有办法兼容的。icoMoon在开发图标字体时生成字体文件以及demo网站，用过icoMoon的同学都知道有一个“SupportIE7”的选项。icoMoonIE7支持实现原理：在style中使用*zoom触发重绘（triggerhaslayout），检测脚本中关键字className插入dom动态Node实现；考虑到目前IE7的市场占有率以及这种方式带来的性能消耗，不建议兼容。另外，还有解决图标只能是单色的问题。Alibabaiconfont+也是一个在icon字体开发过程中生成字体文件和demo的网站；Alibabaiconfont+生成的demo可以解决单色图标的问题。原理是生成svg集合，然后使用svg渲染图标。但是这种方式兼容性较差（SVG兼容性总结），如果移动端开发不考虑低版本浏览器的兼容性，可以试试这种方式。根据以上图标字体的优缺点，我总结的使用场景如下：1、Webapp（H5）小图标放大变形问题解决；大多数情况下，移动页面不能使用Sprite图片，Sprite图片用于表示图片大小固定。移动端需要兼容不同屏幕尺寸的移动设备，这就要求图片可以根据屏幕尺寸变化。如果你的图像大小是固定的，你可以使用精灵图像。2、PC端小图标性能更佳，小图标大小无需改变原图；PC端页面优化可以将部分精灵图替换为小图标，字体图标比精灵图http请求少，体积更小；（加载一个页面分时模块开发关系可能会有多个sprite图片，但是使用字体图标，一个文件就够了）在PC端做换皮业务的时候，使用字体图标更加优雅方便。（之前在做页面换皮肤功能的时候，发现换皮肤的时候，小图标要有一套sprite图有点麻烦，如果是字体图标就OK了直接更新颜色样式。）知乎、斗鱼、哔哩哔哩用的地方很多。雪碧，如果我们维护这种类型的网站，我们可以用图标字体代替它吗？从两个方面考虑：1.开发时间和成本问题。使用自定义图标字体替换Sprite图片需要一定的时间。如果需要快速更新小图标，建议继续使用雪碧图；2、字体和图标兼容，单调。如果网站需要兼容低版本浏览器，图标比较复杂或者颜色比较多，还是需要使用Sprite。因此，在实现小图标时，Sprite和图标字体会在同一个网站上共存。为什么自定义图标字体很费时间，太复杂的图标无法实现？请阅读下面的iconfont开发流程了解一下。2.iconfont开发流程；接下来是本文最大的一章，我将从自己实现的图标字体的小demo开始，详细列出所有步骤。使用免费的图标字体：如果网站没有使用自定义的图标字体，而是使用网上免费的开源图标，实现起来会很简单；比如我要使用阿里巴巴iconfont+上的图标字体，进入网站登录（可以用你的github账号登录），从图标库中选择你喜欢的图标：这里我选择了三个小图标，点击在右上角的购物车中，将选中的图标添加到新建工程中，然后点击“下载到本地”：下载压缩包中包含三个小图标字体文件和三种实现方法的demo；下载图标字体的三种用法，打开对应的html（demo_fontclass.html、demo_symbol.html、demo_unicode.html）文件了解（也可以在我的demo中直接打开这三个文件查看用法，所以用法会此处不再赘述）；有4个字体文件（EOT/SVG/TTF/WOFF）兼容所有浏览器，因为不同的浏览器有不同的字体格式兼容性不同：使用自定义图标字体：在实际开发中，基本都是使用自定义生成的图标字体。大致步骤如下：1）使用PS-矩形工具生成图标；2）AI软件打开PSD文件，File->Scripts->SaveDocsAsSVG生成SVG文件；3）访问阿里巴巴iconfont+（或iconMoon）上传SVG生成字体文件；PS：精灵图vs图标字体教程中，PS导出AI文件的步骤比较多，实践后PS生成的AI打开文件时容易显示空白，AI软件直接打开即可PSD文件，所以这一步可以省略。其实自定义图标字体的生成一般都是交给设计部的同事（可能设计部的同事用的是Sketch而不是PS来生成小图标），因为需要知道整个过程的细节，所以问了同事设计部门生成自定义图标字体的技巧和方法；这里分享一下生成自定义图标字体的具体过程：首先，下载生成小图标的软件：PS（Photoshop）、AI（AdobeIllustrator）；PS下载地址：mac版、windows版AI下载地址：mac版、windows版1）使用PS-矩形工具生成图标；预期演示功能：三个小图标：笑脸、黑脸、帽子；默认显示笑脸+帽子，鼠标悬停，变为黑脸+帽子（颜色变为绿色）；要实现的小demo会有三个小图标，然后用PS生成这三个小图标；不管是用Sketch还是Photoshop画小图标的思路都差不多，都是用各种基础图形来添加相减得到想要的小图标；所以过于复杂的图形会很费时甚至无法实现（PS矢量小图标制作，Sketch小图标制作技巧）笑脸PSD：使用PS新建165px124px图层，使用“圆角矩形工具”创建100px100px圆（颜色#666）：继续绘制「圆角矩形工具」小图标的眼睛（可以改成白色直观）：ctrl+e（command+e）合并形状，选择“排除重叠形状”：小图标的嘴有点复杂，用钢笔工具或者用两个圆相减（“排除重叠形状”）+矩形工具（“与形状区域相交”）生成嘴巴：然后ctrl+e（command+e）合并形状，选择“排除重叠”shapes”生成笑脸黑脸PSD：和笑脸PSD一样的过程，只是把嘴巴旋转180度：帽子PSD：用PS新建一个165px124px的图层，用“椭圆工具”新建一个150px20px的椭圆（color#666），然后绘制一个90px*110px的椭圆：在第二个椭圆图层中使用矩形工具（“minusthetopshape")删除椭圆内容，然后将形状与第一个椭圆合并ctrl+e（command+e）：2）AI软件打开PSD文件，File->Scripts->SaveDocsAsSVG生成SVG文件；生成三个小图标的PSD后，我们用AI软件打开三个文件，然后分别处理生成SVG文件：3）访问阿里巴巴iconfont+（或iconMoon）上传SVG生成字体文件；将以上步骤生成的SVG文件上传到阿里巴巴iconfont+中，然后这些小图标在“我上传的图标”中：将图标添加到库中，再添加到项目中，最后就可以下载字体和demo了到本地：字体文件下载完成后，就可以轻松实现我的小demo了：小demo演示地址；3.iconfont练习注意事项。->如何制作图标字体；2、图标字体使用注意事项；跨域问题1）配置自己的服务器；#对于Apache
