webfont应用系列 如何制作图标字体？

最近在评估font-face是否可以用在邮箱的实际开发中，第一步就是做矢量图标（字体图标要矢量），如何把位图图标转为矢量？

1、用PS转为纯色：PS打开图标，上色（黑色），如果原图不是纯色，则需注意对边缘的处理。

 图一、用PS把图标处理成纯色

2、以eps格式导出：另存为，格式选择EPS。

 图二、以EPS格式导出

3、用AI打开，选择“对象”->“实时描摹”->“描摹选项”，在弹出框中设置“描摹选项”，参数如图所示：

 图三、“描摹选项”设置

点击对话框右上角的“描摹”按钮。

4、完成第三步之后，初看起来图标们没什么变化，但是细心的你可能会发现，顶部工具栏出现了“扩展”和“实时上色”按钮：

 图四、“扩展”按钮

点击“扩展”按钮，结果如图五所示：

 图五、“扩展”结果

5、矢量转换完成，简单吧！“右键”->“取消分组”，然后就可以选中具体的矢量图标制作字体了。

 图六、千呼万唤“矢”出来

备注：如图所示，位图转成矢量，效果不如人意，毕竟只是测试，如果正式环境还是要把矢量图画出来

工具：

• Adobe Illustrator CS5
• Fontographer 5.1，下载地址

1、打开Fontographer，菜单"File"->"New"新建字体文件，双击第一个带有两个"**"的格子，打开编辑页面。此时为了方便查看，建议通过"Windows"->"Tile vertically"把窗口为横向平铺，如图（右边是编辑页）：

把矢量图标复制到编辑页中，调整位置和及大小，主界面可以实时预览图标形状，如图（为了方便截图窗口调成了上下平铺）：

关闭编辑页，回到主界面，此时一个字体图标做好了。

2、但问题是，如何让1中添加好的图标对应到具体的字符上面呢？

回到主界面，点选刚才编辑的格子，菜单"Element"->"Selection info"，在出现的对话框中填写"Glyph name"（字符）及"Unicode index"（字符编码），点击"ok"，如图：

这样，当使用这个字体文件时候，字母a就会渲染成其所对应的图标。

技巧：字符容易记住，编码却不易，此时通过"Unicode index"项右边的Get frome "name"按钮获取字符对应编码。

3、第二步之后，图标字体基本上完成了：

接下来在菜单"Element"->"Font info"中设置一下作者、版权等相关信息。

4、导出字体文件，菜单"File"->"Generate font files"，选择文件格式、路径，导出即可完成字体文件制作。

备注：一般导出ttf文件，要想转成其它格式文件，笔者推荐这个网站：@FONT-FACE GENERATOR，上传ttf之后，自动生成eot、woff、svg等多种格式，且提供打包下载。

预告：下一节会输出webfont的性能问题以及如何在实际项目中进行使用。