图标字体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篇