iconfont的制作
0、前言
此次所要制作的iconfont与前端通常所用的大体相同，只是最后多了一个环节。过程中有一些知识点和值得注意的地方，为避免忘记故记录如下。
1、需求
收到一张图，要求将其中部分小图制作成字体并将这些字体添加到既有的一个ttf字体文件中。
图1-1 部分截图
2、方案
以下是实践完结后总结的基本流程：
1）用PS将图片路径勾勒出来；
2）将工作路径从PS导入AI中，填充颜色；
3）用AI将图像导出为SVG格式矢量图；
4）将SVG矢量图上传到icomoon中转为ttf文件并下载；
5）使用FontCreator打开ttf文件修缮出错的图标，并将其与既有ttf文件合并。
出场工具有：
PS、AI、FontCreator（Fontlab Studio）、icomoon.io/app（www.iconfont.cn）
3、过程
1）使用PS勾勒图片路径，要得到图像的工作路径首先要抠图，我常用的方法是：
① 首先用魔棒工具将不需要的色块选中删除掉；
② 在图层面板中使用“Ctrl+鼠标左键单击”获取选区；
③ 右键图片“建立工作路径...”；
④ 在图层面板中，切换到“路径”选项卡，选中路径后使用Ctrl+C复制并粘贴到AI中。
按：从图1-1中可以看出，此次的图像的轮廓线颜色与背景色相近，后续需要用钢笔工具仔细打磨才行（PS和AI均可）。
注：当将PS中的路径粘贴到AI中后，我遇到了无法对路径进行操作的情况，后来发现它是复合路径，于是想通过“对象/复合路径/释放”解开，但是提示无法完成操作，后来从图层面板中，我将该图层中的路径全都拖出后解决。
2）填色
填色很简单，不过需要注意的是最后绘制好的图像中不要有描边，所有颜色均应通过填充实现。之所以这样做，是因为后续将SVG转换为ttf时，描边会被丢弃（若有描边，则转换时icomoon.io/app/网站也会有提示，iconfont.cn不报错不过显示出的图片会是空白），应该是“描边”会涉及到“粗细”这样的属性，这与“矢量”字体的概念相悖。
按：虽说最终绘制的图像中不能有描边，但绘制过程中还是可以用描边做效果的，毕竟很多时候描边更方便快捷，只不过在最后我们需要将描边转换一下（选中要转换的区域后，依次点击“对象/路径/轮廓化描边”即可）。
3）用AI将图像导出为SVG格式矢量图
这一步比较简单，只是画布大小之类的建议正规化一点，我一直使用的是从iconfont.cn上下载的AI模板，还不错。
图3-1 iconfont制作模板
4）将SVG矢量图转为ttf文件
这里用到的是icomoon.io/app/#/select这个站点的在线服务，其实我觉得用在线工具挺麻烦的，但粗略的在网上搜了下并没找到专门声明用作svg2ttf的工具。操作流程如图3-2所示。
注：如果是前端网页用，那么到这一步就结束了。
图3-2 icomoon的操作流程
5）使用FontCreator打开ttf文件修缮出错的图标，并将其与既有ttf文件合并。
最开始用的ttf编辑工具是Fontlab Studio，网上说可以直接将AI中的图像复制粘贴到Fontlab Studio中（意即上述“3）、4）”均可省略），但该软件不支持Win10操作系统（下图是Win7虚拟机里的截图），如果把它和AI都装进虚拟机会太费事儿（AI太大），所以我转而去搜索其它同类软件，于是挖到了FontCreator。
图3-3 Fontlab Studio界面
FontCreator不仅支持WinAll，而且它的编辑功能貌似比Fontlab Studio要强大些，在修改icon时可以直接对锚点进行操作，只不过不能直接从AI粘贴图像过来。下面详细说说它的使用过程：
① 用FontCreator打开上一步转换好的ttf文件（如图3-4），打开后发现原本属于一个图标的部件被分割成了多个个体（Fontlab Studio也是如此）。
图3-4 FontCreator中icon被打散
一开始有点懵，不过双击图标进入编辑页面后，可以将其它图标的路径粘贴过来，定位也不用调，自动的就跟原有的效果一致。
图3-5 FontCreator的图标编辑
② 将这些图标合并到既有的ttf中。
首先需要在原有的ttf文件中开辟一块空地用于粘贴新的iconfont：打开原有的ttf文件后，依次点击菜单栏中的“插入/字符”调出插入字符界面，在界面下方的“代码点”处输入相应的“编号/编号区间”，确定后即可看到既有字符后多出了几个空白单元。之后将新作好的图标粘贴过来即可。
图3-6 FontCreator的插入字符
最后将字体导出为ttf格式文件即可，默认可能导出的是otf格式，这时需要在“文件/导出设置”中设置格式。
4、其它
在用AI修图的时候常用到以下几个知识点：
1）裁剪/合并多个路径时，会用到路径查找器，可通过“窗口/路径查找器”打开相关界面；
2）将描边转换成色块，可选中描边对象后依次点击“对象/路径/轮廓化描边”生成；
3）钢笔工具的各种操作。
