教程:做套自己的icon font

Part 1: Why Icon Fonts?

Just because Icon Fonts are Awesome!

来谈个历史问题——
做兼容移动设备的网页时,retina屏幕的存在导致了我们经常要为一个logo做两套图
一套原始尺寸,另一套两倍尺寸,并且还要进行media query。

如果此时我们的logo可以随意放大缩小并且轮廓清晰的话就好了。
当然我们也可以用canvas或svg画个logo上去,但如果页面上有很多这类icon的话,这么做会累死人的……
随着扁平化设计的流行,我们的logo、icon似乎不需要设计的那么立体化了:没有渐变没有阴影,只是单纯的纯色图形
还记得以前在MS Word里用Wingdings字体打小图形的日子吗?
——纯色的、可缩放、轮廓清晰。
——没错,从很早以前开始,字体就可以满足我们这个需求了。

其实Github去年就开始用icon font来做网站的icon了。
并且,github也公开了他们的octicons,供大家使用。
bootstrap开发到3.0时,也把所有的图片icon换成了icon font
再到国内,技术龙头阿里巴巴下的一淘也公开了内部的UX图标字体库
再根据我对淘宝的观察,他们确实也有一套自己的icon font,但是至今没有公开。

所以说,Icon Fonts已经是大势所趋了!

Part 2: How to Make My Own Icon Font?

有资金的专业人士可以直接购买字体设计软件,比如GlyphsFontlab等。
但是对把设计、画画作为业余爱好的我来说,还是用免费的吧——icomoon就是一款非常不错的svg转font的web app。

以下是简易教程:

step 1

Step 1

在Adobe Illustrator里画个矢量图形。
当然,Fireworks或者其他可以画矢量图形的软件应该都可以。

step 2

Step 2

保存为svg,svg的options用默认的就行了。
当然,保存一份.ai文件保底也是必须的。

step 3

Step 3

注册icomoon后,进入app页面。
点击(1)导入刚刚保存的svg,然后就能在”Your Custom Icons”下预览自己的图形字体了。也支持拖拽导入。
可以在(2)里调整字体大小来检查字体的细节。
工具栏(3)从左到右分别是选择、删除、编辑,选中状态后点击下方的icon就能进行相应操作。
点击(4)的话就跳到导出为字体的界面,当然,也可以导出为图片。

step 4

Step 4

这是编辑界面,可以做很多细节调整:
比如旋转、镜像、缩放、位移等。
这里有个tag,这个tag之后就是class name中的后缀。

step 5

Step 5

这就是导出为字体的界面。
(1)这里要输入为这个字符设定的unicode。
你可以使用private use area,也可以使用有映射关系的字符unicode。
这里,我推荐对于图形类的icon font使用private use area unicode绑定映射关系,而对字符型icon font使用相对应的unicode映射。
比如我们ele.me的logo,我就是直接把字形’e’映射到’e(0065)’,’.’映射到了’.(002e)’,最后一个歪斜的’e’映射到了大写的’E(0045)’。
但是一些icon,我就放到了e000这段private area里。
(2)下一步讲解。
点击(3)打开字体的一些设置,鉴于我不大懂如何设计字体,所以就用默认的了。
点击(4)下载

step 6

Step 6

这就是上一步(2)的设置界面。
font name就是之后在css里要定义的font-family的名字;
class前缀为这套字体图标的class前缀。下载后能找的相对应的class name。

下载后得到一份zip文件,打开里面有eot(IE8),woff(IE9+, Chrome, Firefox, Opera, Safari),ttf(ios Safari 5-),svg等对应各种浏览器和平台的字体库,一份ie7 hack js文件,展示字体的index.html,一份已经写好的css和一些read me、licence等。
照着html和css导入字体和样式,编写好html,我们就可以很方便的使用自己制作的字体了。

BTW

如果你不会或者不想自己做字体,icomoon也提供了很多的icon font库,网上也有很多类似的库,我就不例举了。
一淘ux的这篇文章里也有很多关于icon font的说明和经验分享。

在此感谢xy同学对我的各种盘问让我挤出了这篇文章。
本身觉得这种事情很简单根本不值得写博客来说明的,但是在和某人简单解释了一遍原理后某人也没明白,于是按照他的要求,我还是写了下来。
写的过程中我也发现了自己其实也有很多没有搞明白的东西,还可以深入学习下字体设计什么的……
=v= 以上~