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?
有资金的专业人士可以直接购买字体设计软件，比如Glyphs、Fontlab等。
但是对把设计、画画作为业余爱好的我来说，还是用免费的吧——icomoon就是一款非常不错的svg转font的web app。
以下是简易教程：
Step 1
在Adobe Illustrator里画个矢量图形。
当然，Fireworks或者其他可以画矢量图形的软件应该都可以。
Step 2
保存为svg，svg的options用默认的就行了。
当然，保存一份.ai文件保底也是必须的。
Step 3
注册icomoon后，进入app页面。
点击(1)导入刚刚保存的svg，然后就能在”Your Custom Icons”下预览自己的图形字体了。也支持拖拽导入。
可以在(2)里调整字体大小来检查字体的细节。
工具栏(3)从左到右分别是选择、删除、编辑，选中状态后点击下方的icon就能进行相应操作。
点击(4)的话就跳到导出为字体的界面，当然，也可以导出为图片。
Step 4
这是编辑界面，可以做很多细节调整：
比如旋转、镜像、缩放、位移等。
这里有个tag，这个tag之后就是class name中的后缀。
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
这就是上一步(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= 以上~