关于iconfont

关于iconfont

背景

字面意思是字体图标，那么它到底是字体还是图标呢？
首先说一下字体是什么？
是字符，又是什么？
字符是文字与符号的总称，包括文字、图形符号、数学符号等。字符集是字符的集合。计算机如何显示这些字符呢？
把字符转换为整数，则成为编码字符集，目前有很多字符集，ASCII， UCS ，Unicode，以Unicode为例：

Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。

它的目的就是让计算机可以更为简单呈现和处理文字，所以我们在计算机看见的大都是基于Unicode编码转码的显示的一个过程。
我们也没有必要再去深究，只需要知道网页字符是通过计算机编码转变过来的。

font-family:\5FAE\8F6F\96C5\9ED1;/*微软雅黑*/

为甚用

使用字体来实现图标就有很多优势：

• 字体文件小，比图片文件要小得多的多；
• 容易编辑和维护，尺寸和颜色可以自由地编辑；
• 透明完全兼容IE6；

（转）如何将icon变成字体？

最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。

我们要用到一些字体编辑软件，比如FontCreator、FontLab等，这里我们用FontLab来演示。

还原步骤很简单：

PSD–>eps–>FontLab，即将PSD转换为illustrator的eps格式，然后将某个字符复制到FontLab中即可。

具体步骤：

打开设计稿psd，将其保存为Photoshop eps格式，我们这里以Qzone中说说发表框的表情icon为例：

在illustrator中打开保存的eps文件：

取消分组，然后点选某个icon，复制。

打开FontLab，随便打开一款字体文件，比如tahoma.ttf：

然后双击某个字符，将原有图形删除，粘贴刚才复制的icon对象：

调整图形大小，一个icon就完成还原了。

就是这么简单。所有icon还原完之后，生成字体文件就可以了。

查看字体对应字符，可以在字体列表中，在某个字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：

可以看到字体对应的字符是i，unicode编码是0069。

---

我认为制作图标比较耗时，目前已经有很多不错的iconfont库供我们前端同学使用，还能在这些库中建自己的资源库，可以满足一些日常的需求。