关于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库供我们前端同学使用,还能在这些库中建自己的资源库,可以满足一些日常的需求。