Icon-font图标字体的四类制作方法
FontAwesome 经历了两年的进化，如今已成为不少工具性应用开发者的首选。但 FontAwesome 的图标毕竟有限，在某些特定的情景中，FontAwesome 的字体并不能准确地传达合适的意义。为自己的 Web App 定制 icon-font 字体在某些时候就变成了一种需要。
因为想为公司的产品定制一套 icon-font，把曾经那些不易改变不易调校大小颜色的图片改成图标字体，经过搜索和试用，发现 icon-font 大致有四类制作方法。这四类方法的图标生成原理是一样的，
主要步骤：
步骤一：使用矢量图形编辑器设计图标，画布最好设为512px*512px。以 Adobe Illustrator 为例，保存为 svg 格式时会弹出一个 svg 图片属性设置对话框。这时候请按下图设置选项,
上图来自 Filament Group
步骤二：将 svg 图标文件导入 Glyph 字型排版工具编辑调校，生成icon-font字体文件
步骤三：制作与字型编码匹配的 CSS 文件供网页调用
以下介绍的四大类型的 icon-font 制作方法的最大分别在于第二和第三步，也就是使用什么工具编辑和生成字体的不同，及是否自动生成 CSS 文件的区别。本文会忽略第三步CSS文件的制作的过程，重点介绍第二步的差别和心得。
1. 速成系 ：一步到位
在线 icon-font 生成器，比如 icomoon.io 或 fontello + 自制 CSS 文件
icomoon 的 icon-font 生成器界面
IcoMoon 和 Fontello 都支持直接拖拽 svg 格式的图标到网页上传图标，即时在线预览不同字号的图标字体效果，批量编辑图标的 CSS class 名称和 Unicode 编码，以及下载为全套 web 字体及 CSS 文件，可谓相当方便。
倘若下载之后发现其中某个图标的名称或编码需要修改，而 icon-font 生成器已经被关闭，如果你需要编辑的图标不超过10个，那么恭喜你，你依然有机会在几分钟内完成图标字体的生成。但是如果需要修改的图标太多，那么这种免费的在线编辑器恐怕会成为你的噩梦。
由此可见，免费的在线图标编辑器只适合小批量快速的图标编辑，图标的质量取决于你在svg文件设计时的质量。
当然，如果你想使用在线的 icon-font 生成器服务于大型的图标字体项目也不是不可以。IcoMoon 就推出了 Premium 付费服务，你只需注册并按使用期限付费，就可以在线保存 icon-font 编辑项目了。
速成系方法适合不擅长设计，想要快速获得定制图标库的开发者。
2. 尊贵系：专业级的体验 (Mac)
矢量图形编辑软件（Adobe Illustrator）+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件
尊贵系，顾名思义，需要花费不少银子才可以获得正版使用权。
其中的 Adobe Illustrator 不用多说，是矢量图形设计利器。自Adobe推出CC按月付费以来，设计师对于 Adobe 软件的支出便成了无底洞。虽然 Affinity Designer, Sketch 等众多支持矢量图形编辑的软件纷纷推出满足一次性付费的图形编辑器市场的需求。但是毕竟这些新应用或多或少还有一些 Bug，稳定性短时间内难及 Illustrator。当然，如果你对其他矢量图形编辑软件有信心，在这一步把 Adobe Illustrator 替换成其他你心仪的图标编辑软件，甚至直接使用接下来介绍的 Glyphs 制作亦可。
Glyphs
Glyphs是一套专业级的字形编辑器，完整版的价格约人民币2000元，支持直接在Glyphs里创建矢量字形。Glyphs Mini 相比 Glyphs 主要保留了SVG导入，字体命名及字体文件导出的功能，价格约为完整版的十分之一。
全套价格不菲，如果你已是 Illustrator 的重度使用者，建议配合 Glyphs 使用。可视化的节目适合专业的字体设计师，及不愁经费的个人及团队。相比接下来要介绍的开源系，Glyphs 相信在字体编辑导出的效率上会大大提高。
FontLab TransType 可用于转换字体，导出不同格式的字体文件
FontLab公司出品的一系列字体编辑转换工具与Glyphs类似，FontLab Studio也是专业级的，支持Mac和Windows平台。因为没有使用过，这里就不赘述。
使用 Glyphs 导出 icon 字体文件后，可以使用 Font Squirrel 网站提供的Webfont生成器上传由 Glyphs 导出的.ttf格式字体，然后选择默认的Optimal选项，最后“Download Your Kit”，生成器就会默认生成包括.eot, .svg, .ttf, .woff, stylesheet.css 及 Demo 页面的文件。不过 icon-font 字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel 的字体生成器会更加适合英文字体的生成和排版效果预览。
Font Squirrel Web Generator 截图
如果你想高度定制导出的 WebFont Kit 的文件类型，可以选择 Expert 进行更多设置
2. 开源系：尊贵系能做到的，我也可以，只是…（Windows/Linux/Mac）
InkScape + FontForge + FontSquirrel WebFont Generator
不同于尊贵系，这一系的软件全部是开源的，支持全平台。
InkScape是一款开源的矢量图形编辑工具，点击菜单栏 Text > Glyph 即可进入字型编辑面板。不同于 Illustrator 只能浏览自行，InkScape 的 Glyph 还可以将当前选中的图层添加到为新的 Glyph。不过过程稍稍麻烦，这就是开源软件的不便之处。毕竟缺少组织性的综合产品设计规划与开发，InkScape 看似功能俱全，但界面图标设计和易用性欠佳。
FontForge是一款开源的字体编辑工具，在 windows 和 Linux 上上有 GUI 版本，在 Mac 上可以通过命令行安装。虽然功能上几乎接近专业级的收费软件 Glyph，可以导入 svg 文件，编辑字体信息，调整字型样式，但是在体验上真的谈不上方便，不少操作有些繁杂，有一些明显的 Bug。但它毕竟是开源的软件，并且在2014年中重新开始了开发与更新。
4. 竹林系：搞定命令行如有轻功（Mac/Linux）
**矢量图形编辑软件（Adobe Illustrator）+FontCustom **命令行
Font Custom网站截图
我尝试用过两次，第一次是在几个月前，搜索 icon-font 制作指南时发现了放在Github上的开源项目FontCustom，但那是因为不是很明白这类基于RubyGems的工具的安装运行原理，所以没有安装成功。
第二次尝试是在今天，因为重装过 Yosemite 的 Mac 系统，于是从零开始跟着安装指南安装了 RubyGems，Brewhome，FontForge。据说只要运行一句命令行，程序会自动把存有svg源文件的图标自动生成为 webfont，同时会生成 css 文件和HTML预览文件。
现有的一个 icon-font 库 Ionicons 的目录结构及 Cheatsheet 预览页面的样式就同 FontCustom 非常相似。他们都是基于 Python 的程序自动生成的。
用户可以自己在 yml 文件中设定模板生成参数，支持直接生成到指定路径的文件夹，或是生成 scss 版本等。如果掌握了FontCustom 命令行生成 icon-font 的方法，则无需依赖在线的 icon-font 生成器，可以在本地意见生成 icon 字体和全套的页面文件。这就使得图标的修改更新和预览非常方便，也非常方便团队协作。
但没有什么是完美的。FontCustom 虽然长远看来十分方便，但是如果没有命令行使用经验，要自己安装和上手是有些复杂的。
另外在安装 fontCustom 时用到了一个 listen 的 package，安装时提示2.8.4的版本503错误，最后是手动安装了listen 的2.8.3的版本，才得以继续 FontCustom 的安装。
另外fontCustom在生成文件的模板设定上还需要下一番功夫，才能让生成的文件版本、名称和结构称心如意。
小结
以上四大类的icon-font生成方法适用于不同的项目和人群，欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验，描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用，所以个人选择使用第四种方案，也就是FontCustom。
至于icon-font制作的第一步，也就是SVG icon设计的部分其实也是一个很有学问的步骤，尤其当icon要面对不同字体的挑战时，尤其是14px以下的字体时，有可能显示不清或是有锯齿，这就需要在图形构思方面下更多功夫。
今年最让我喜欢的icon-font库不是FontAwesome，而是Drift公司为旗下ionicFramework配套设计的icon-font Ionicons。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看，Ionicons或许也使用了FontCustom生成字体，不过他们高度定制了Python Script，实现了更加进阶的诸如CheatSheet生成的功能。
最后，icon-font只是用于网站图片展示的方法之一，不见得适用于所有项目，尤其是基于Marketing的小型项目，有时直接使用svg或png图片效率更高。
欢迎有兴趣的朋友参与讨论。
