如何制作icon-fontweb字体ttf?傻瓜教程送上

1、这里，以已经有了一个位图为例~灰色的，一个丑不拉几惊世骇俗的……额……丑图标。我们把它在AI里抠图来~填上一个红色~然后把红色的抠出来的新矢量图给复制下来。

2、新建一个画布，（好吧，画布啊窗口啊文件啊什么的，你爱怎么称呼都好，不要在意这些细节），这里要注意的是，如果你每 个icon的大小不一样，那你至少得保证你的SVG画布一样大才行，新建的画布就和你切图时用的统一尺寸一样，一个标准就好，把你所有的icon都放进这 个尺寸里，调节大小，它们变成字体就不会错。这里楼主需要46*46的，所以建了46*46的。

4、下面，我们给我们的图标填烫腥治奁充成白色。为什么要白色？因为程序员使用icon-font的ttf文件时，他们的默认颜色 一般是黑色和白色，具体的色值、大小、阴影特效等一切，由于制作完成后是ttf，和他们的代码字体没有区别，所以他们会自己根据需要来随时灵活变动，而不 是跟你说“噢设计狮~给我一个红的~绿色的也来一个~黄的也来一个~”他们可以自己来处理，不需要为了这种小事情打扰你。所以，你只需要把它弄成白色的就 好啦~怕变色以后看不到它了么？点击视图中的轮廓，就可以看到它啦~注意，变成轮廓的时候，其实没有黑色边框的啦~只是为了让你能够看到它才显示的哟~

5、保存成SVG格式。保存以后，桌面上生成了一个看起来像是浏览器文件的东西，什么鬼？这是浏览器才能打开么？打开怎么 没东西？因为你是白色啦~看不到是很正常的~背景也是白色的嘛~哈哈哈……这个可以通过属性查看，它是SVG文档的格式。名字真的可以起这么随意么？当然 啦~在制作icon-font的页面里随时可以编辑起名字之类的啦~所以，不要在意这些细节，让我们飞快的进入下一步。

7、在icomoon中上传我们的图标。点击上传图标的按钮，就会打开文件夹，选择你存储的位置，选中刚才导出的那个 SVG图标文件就可以。放心，这并不是你上传给他们做资源~只是在线制作而已~并不需要你捐献自己的灵感~选择完以后，你会在icomoon上看到你的 SVG图标哟~是不是好神奇~别急呀~还有最后一两步啦~

9、下载好了，在桌面有一个icomoon的压缩包，里面包含了所有的相关文件，怎么用？直接把这个压缩包或者解压后的文件夹发给你的程序员就好了，他会知道怎么用的。他不知道怎么用怎么办？打他呀！装X不打草稿！不会用还敢叫我们做！！咳咳咳……来来来，秀一下我们的成果。这个字体文件，你自己也是应该可以用的，只是是图形而已，可以自己根据爱好来研究~