使用fontello和Abobe Illustrator制作自己的web字体
Tag fontello, Illustrator, web, 字体, on by view 6669

自定义web字体流行已经不是一天两天的事了,仿佛是随着google,ajax,web2.0这些字眼在多年前就已经到来了,不过如今却是越加流行了。用自定义字体代替图片图标确实有着不少好处,比如,字体是矢量的可以无限放大,字体可以随意的改变颜色只需在css中设置color属性即可。最近发现了一个在线字体生成工具很是不错,那就是fontello

fontello提供众多图标供用户定制选择,并且用户还可以上传自己设计的svg图标文件,fontello会将其转化打包为字体文件fontello.eot、fontello.svg、fontello.ttf以及fontello.woff,供不同的浏览器调用,它在浏览器中的调用方式和众多的图标字体的调用方式是一样的——通过css调用,或者说通过指定class值的html节点调用,相信所有人都会使用,如果不会,自己查看打包目录下的demo.html文件就会了。

字体设计:

首先打开Illustrator,通过性状工具以及钢笔工具勾勒出你所需要的图形,然后转化为复合路径(对象>复合路径>建立),然后保存为svg配置文件SVG 1.1,即可生成svg文件。

illustrator_demo.png

然后,在fontello页面的custom区域拖拽上传svg文件便会生成自定义的字体文字(或者说是图标),选中它,以及你所需要的图标,点击download便可以打包字体文件。

fontello.png

使用字体图标的好处就不在赘述了。在Illustrator中设计图标时无需在意图标的颜色,因为对于字体来说是没有颜色的,只有形状,这也是在Illustrator中将其转换为复合路径的原因。另外需要注意的是在Illustrator中绘制路径的话要保证路径是闭合的,不然无法形成形状,在导入fontello后便会发现图标是空白的,假如你发现自己的图标是空白的或者是全黑的,那么建议你先学习一下Illustrator的使用以及路径和性状这些概念再来设计图标。