在做手机移动端项目，经常会遇到图标在手机上显示模糊的问题，经过无数革命先辈的总结，得出将图标字体化的优秀解决方法，不但可以高清显示图标、适配retina屏，还能像字体一样定义颜色和大小，在觉唯网中也是大量了使用的字体图标。结合最近动漫项目字体图标的运用，在此总结如何将PSD文件华丽变身为iconfont的过程。欢迎一起探讨，轻拍砖！
完成华丽的变身，只需三大步。简而言之就是：
- PSD图标矢量化，复制出图标路径（关键点：路径）
- 粘贴图标路径到Illustrator中还原图标，导出SVG文件（关键点：轮廓化图标）
- SVG导入字体图标自动化平台工具，生成iconfont字体文件。
下面正式开始我们的华丽变身之旅。
第一阶段：准确无误的复制出PSD图标路径
我们得到鬼斧神工的设计稿之后，深呼吸，调整好心态，准备开搞。如何将PSD转为SVG？关键在于“路径”。弱水三千只取一瓢，我们最终需要的只是图标的路径、路径、路径（重要的东西讲三次）。如何获取图标的路径呢？正常情况下我们将会面临三个情景：
- 情景一：设计稿的图标是用路径工具绘制（在项目开始前，尽量与设计师沟通使用此方法设计图标）。
恭喜你，运气真好，此时你只需要做到“复制”就可以进入下一阶段。复制路径的步骤方法：选择“路径选择工具” —> 点击图标所在图层 —> Ctrl+C —> 准备进入下一阶段 - 情景二：设计稿的图标不是用路径绘制。
此处苦逼的节奏已来临。三个解决方法：
（1）、选中图标形状的选区，点击“从选区生成工作路径”，如果图标选区像素精度不够，生成的工作路径就很龊了，缺乏精度，无法直视，基本上不能使用或者需要二次加工修改。（适用：图标源文件像素足够大非常精细）
（2）、默默的掏出“钢笔”工具按照图标的形状，小心翼翼的临摹出来。（适用：拥有使用钢笔等工具的临摹技能）
（3）、寻找设计师好基友帮助，将图标修改为路径绘制；（适用：没办法了，求人吧） - 情景三：设计稿的图标只有部分是路径或由多个路径图层组合而成。
这里只能呵呵了。解决方案：不管三七二十一，路径全部拷贝出来，缺少的后面再补、再通过钢笔描绘、图形裁剪等方式来处理得到。
第二阶段：优雅的将路径粘贴到Illustrator还原图标
到这里，我们的第一阶段已经完成，接下来进入第二阶段。在这个过程可能花费的时间很多，但不轻言放弃，相信付出的努力是有回报的。打开Illustrator矢量作图利器，新建一个 64*64 的文档。将我们之前复制出来的路径粘贴入文档中，选择“复合路径”，点击确定，并且将路径大小调整到合适的位置，如图：
路径粘贴完成后，接下来我们需要将路径还原成图标形状。矢量物体由填充和边框组成，后续为了能成功转换为iconfont文件，需要注意的是：
- 路径必须闭合
- 不能带描边，需要轮廓化形状
在这个过程中会发生很多意外，我们要习惯，拥抱变化，成就未来。下面以此动漫图标还原为例，图标的最终面貌是这样子的：
我们下面开始进入还原图标。
step1：为方便于我们观察路径，先对形状进行描边。ai 里面有三种对齐描边方式：居内描边、居外描边、居中描边。我们点击 “窗口 — 描边” 可弹出描边对话框视图，这里我们该选择哪种描边方式，可以查看psd设计稿的处理方法，这里的例子是居内描边，大小为 2px：
step2：右键取消分组，使每部分的路径独立分开。此时我们已进入高潮，成也路径，败也路径，亮出我们的王牌路径工具：路径查找器（视图 – 路径查找器），开始对路径的裁剪、合并等手术操作。先从下方的两只圆形小脚开始吧，我们选中其中一只圆形小脚，将其进行轮廓化描边处理：
我们再次选中这只圆形小脚，按住Shift键同时选中底部的圆角大框（这里的圆角大框建议就地粘贴多一份出来，因为我们进行形状模式处理后该圆角大框可能会被删除），然后点击在“路径查找器”中的“减去顶层”，效果如图：
同样，我们对另外一只圆形小脚和上方的两根天线做类似方法处理，效果如图：
通过上图的蓝色线范围，我们可以看出，两只小脚和两根天线的多余部分已经被裁剪掉了。
注：上面提到的轮廓化描边，是指将物体的边框独立转换成一个填充物体，也就是由边框线变成形状轮廓。以上操作并不是绝对需要，因为我们演示里的小圆角最终效果是空心的（描边效果），所以我们需要将其转换为一个填充形状来处理；而上方的两根天线则无需转换，我们直接将其去掉边框、设置填充色即可。
step3：最后我们将中间的两只圆圆的眼睛，设置填充色，去掉边框；两个圆角方框都轮廓化描边（这里的处理方式与设计稿对齐保持一致）：
step4：我们的路径已经基本处理完成，我们可以全选路径，将其编组，然后设置一个填充色（任意颜色皆可，但建议最后保存时填充黑色，避免出现意想不到的坑），校验一下是否有问题。
step5：保存为svg格式（文件 — 储存为 — 格式：svg格式），弹出对话框，默认选项，点击确认完成。
第三阶段：SVG 华丽变身 IconFont 闪亮现世
到这里了，也就离成功不远了，开始得瑟吧。
将我们在上述中精雕细琢的SVG上传到iconfont自动生成平台处理，可选择目前主流平台 ：https://icomoon.io/app/ 、http://iconfont.cn/、http://font.baidu.com/editor/ 等，几乎是一键生成，你只需要上传然后下载即可，下载的文件一般也会附有字体文件的使用方法演示（如有个性化需求也可以自定义，如：形状大小、编码信息修改等等）。
注：实际项目中加载ttf字体文件有时会失败或需要较长的时间，此时页面上会显示一个“口”字或其他的错乱的形状，体验非常不好；建议将字体文件转为base64编码在样式中使用。
小贴士扩展
在某些小米手机图标无法显示问题：
解决方案是导出字体文件时，检查图标是否出现上述屏蔽的Unicode，将其修改为其他即可。
收藏 Mark！