制作图标字体过程

参照：http://www.2fz1.com/?p=413

一、使用Illustrator
1、打开矢量图形
2、选择图形复制到剪贴板

如果习惯用PS，可以PS画好，存为EPS，然后Illustrator里边打开

二、使用Fontographer （我是在这里下载的 http://www.orsoon.com/Soft/13865.html ）
1、打开Fontographer，菜单”File”->”New”新建字体文件，双击第一个带有两个”**”的格子，打开编辑页面。此时为了方便查看，建议通过”Windows”->”Tile vertically”将字体列表页和编辑页面左右显示在同一屏幕，这样就可以实时看开编辑的效果。当然，这个排法随便你怎么排，主要是为了能看到效果。

2、将从Illustrator中复制的图形粘贴到编辑页面。调整位置和大小。（我是本地PS里边有一些已经设置好的形状，然后在AI里边复制到字体软件里边）

 

3、将刚制作的字体与相应的字符进行对应。（关键）
关闭编辑页面，回到主界面，选择刚才编辑的格字。
菜单”Element”->”Selection info”，在出现的对话框中填写”Glyph name”（字符）及”Unicode index”（字符编码），点击”ok”，如图：

tips：
（1）、字符容易记住，编码却不易，此时通过”Unicode index”项右边的Get frome “name”按钮获取字符对应编码。
（2）、特殊的unicode E000-EFFF，在unicode中，E000-EFFF是用户造字区，从标准的意思上来讲，这个区间的unicode码最适合来做图标字体。然后使用css的content来将unicode添到文档中去，如下代码：

1	.icon-home:before{content:"\e000";}

但content和before伪类，在IE下兼容情况并不是很好，所以本文还是使用英文字母或符号来造图标字体。

4、在菜单”Element”->”Font info”中设置一下作者、版权、字体名称等相关信息。

5、导出的字体文件
使用“ctrl+alt+g”打开字体导出面板，导出.ttf格式的字体

6、使用在线工具，转换字体格式
使用获得fontsquirrel @font-face所需的.eot,.woff,.ttf,.svg字体格式。
fontsquirrel：http://www.fontsquirrel.com/tools/webfont-generator

坑爹的!不知道为什么，现在看不到这个按钮。（我是浏览器F12，然后找到这个按钮把它的“display:none”去掉的！）然后直接下载转换后的字体！

7、页面应用

具体怎么写我就不详细了，最重要是这里的content: "\E000"; 就是我开始设置的。

网页显示效果：

三、其它
Fontspring作为一款非常老的软件，但教程都非常的少，刚开始为找到制作字体与字符之间的对应关系，摸索了很久。
另外推荐在线图标生成字体：
icomoon：http://icomoon.io/
fontello：http://fontello.com/