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。