iconfont图标字体的四类制作方法


FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义。为自己的Web App定制icon-font字体在某些时候就变成了一种需要。

因为想为公司的产品定制一套icon-font,把曾经那些不易改变不易调校大小颜色的图片改成图标字体,经过搜索和试用,发现icon-font大致有四类制作方法。这四类方法的图标生成原理是一样的,

主要步骤:


上图来自Filament Group

步骤三:制作与字型编码匹配的CSS文件供网页调用

1. 速成系 :一步到位

在线icon-font生成器,比如icomoon.io或fontello + 自制CSS文件


icomoon的icon-font生成器界面

速成系方法适合不擅长设计,想要快速获得定制图标库的开发者。

2. 尊贵系:专业级的体验 (Mac)

尊贵系,顾名思义,需要花费不少银子才可以获得正版使用权。


Glyphs

FontLab TransType可用于转换字体,导出不同格式的字体文件

使用Glyphs导出icon字体文件后,可以使用Font Squirrel网站提供的Webfont生成器上传由Glyphs导出的.ttf格式字体,然后选择默认的Optimal选项,最后“Download Your Kit”,生成器就会默认生成包括.eot, .svg, .ttf, .woff, stylesheet.css及Demo页面的文件。不过icon-font字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel的字体生成器会更加适合英文字体的生成和排版效果预览。


FOnt Squirrel Web Generator截图



如果你想高度定制导出的WebFont Kit的文件类型,可以选择Expert进行更多设置

2. 开源系:尊贵系能做到的,我也可以,只是...(Windows/Linux/Mac)

InkScape + FontForge + FontSquirrel WebFont Generator

不同于尊贵系,这一系的软件全部是开源的,支持全平台。

4. 竹林系:搞定命令行如有轻功(Mac/Linux)


Font Custom网站截图

我尝试用过两次,第一次是在几个月前,搜索icon-font制作指南时发现了放在Github上的开源项目FontCustom,但那是因为不是很明白这类基于RubyGems的工具的安装运行原理,所以没有安装成功。

第二次尝试是在今天,因为重装过Yosemite的Mac系统,于是从零开始跟着安装指南安装了RubyGems,Brewhome,FontForge。据说只要运行一句命令行,程序会自动把存有svg源文件的图标自动生成为webfonts,同时会生成css文件和HTML预览文件。

现有的一个icon-font库Ionicons的目录结构及Cheatsheet预览页面的样式就同FontCustom非常相似。他们都是基于Python的程序自动生成的。

用户可以自己在yml文件中设定模板生成参数,支持直接生成到指定路径的文件夹,或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法,则无需依赖在线的icon-font生成器,可以在本地意见生成icon字体和全套的页面文件。这就使得图标的修改更新和预览非常方便,也非常方便团队协作。

但没有什么是完美的。FontCustom虽然长远看来十分方便,但是如果没有命令行使用经验,要自己安装和上手是有些复杂的。

另外在安装fontCustom时用到了一个listen的package,安装时提示2.8.4的版本503错误,最后是手动安装了listen的2.8.3的版本,才得以继续FontCustom的安装。

另外fontCustom在生成文件的模板设定上还需要下一番功夫,才能让生成的文件版本、名称和结构称心如意。

小结

以上四大类的icon-font生成方法适用于不同的项目和人群,欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验,描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用,所以个人选择使用第四种方案,也就是FontCustom。

至于icon-font制作的第一步,也就是SVG icon设计的部分其实也是一个很有学问的步骤,尤其当icon要面对不同字体的挑战时,尤其是14px以下的字体时,有可能显示不清或是有锯齿,这就需要在图形构思方面下更多功夫。

今年最让我喜欢的icon-font库不是FontAwesome,而是Drift公司为旗下ionicFramework配套设计的icon-font Ionicons。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看,Ionicons或许也使用了FontCustom生成字体,不过他们高度定制了Python Script,实现了更加进阶的诸如CheatSheet生成的功能。

最后,icon-font只是用于网站图片展示的方法之一,不见得适用于所有项目,尤其是基于Marketing的小型项目,有时直接使用svg或png图片效率更高。

欢迎有兴趣的朋友参与讨论。

参考资料

A Designer's Guide to Grumpicon

Markup-free icon fonts using unicode-range

Atlassian: How to make an icon-font: the 8 step guide


相关内容推荐