图标字体http://icomoon.io

图标字体http://icomoon.io

2013-03-15 15:55:47

 

最近在做PC客户端里面的内嵌网页，内核终于在二期使用了Webkit，↖(^ω^)↗对CSS的支持更好了。前端GG特别兴奋的跑来和我说：你把图标做成字体吧，这样就不用切图啦~
然后发给了我好多资料……

( ⊙ o ⊙ )啊！原来还可以这样，世界真奇妙~

CSS3可以利用@font-face来自定义字体，将你的一整套图标变成字体，通过这种方法会减少使用图片，文件非常小，同时也增强了可扩展性。
比如如果需要将图标放在不同的背景中，以前设计时需要做几套方案，现在就像变换字体颜色一样方便使用css进行调整。
（以后妈妈再也不用担心我要累死累活的做深色版、浅色版，各种版了~~）

制作和生成字体使用的工具是：FontLab Studio
WIN版下载戳这里
苹果版下载戳这里

一.先利用photoshop设计图标
比如我设计的这个小箭头

二.将该图标另存为illustrator的eps格式
三.用AI打开eps文件，解组后复制路径

四.安装FontLab Studio，然后已经复制的某个字符粘贴到FontLab中即可。

要注意对齐里面的文字参考线,保持所有图标大小的一致。这就涉及到了英文字体在设计中会考虑的五条线。

具体比例可以看这篇文章：
Illustrator+FontLab 进行字体设计教程

字体制作完成后，一定要放在页面同一根目录下，然后再使用代码调用（代码部分戳这里）

项目做完以后，在找资料的时候发现了这篇文章(⊙v⊙)嗯……介绍了一个开源的图标字体素材库：Icomoon，瞬间觉得之前费了好多事，这不是有现成的么==

具体操作见这篇文章，灰常详细。
如何灵活利用免费开源图标字体-IcoMoon篇