Iconfont那些事儿

Iconfont顾名思义，icon为图标的意思，font为字体的意思，我把它理解为字体图标的意思。用它可以来代替网页中的图片文件，比如图标、特殊字体等元素。说简单一点，它的性质就是字体文件。因此，在网页中，它可以拥有字体的一些属性。下面来记录一下关于它的那些事儿！

首先，先来看看哪些网站有它的影子！

先去淘宝看看，据说淘宝有个板块在使用它。额……貌似更新了，这个板块一眼看去应该是没用iconfont。因为图标的颜色不再是那么的单一了！

可是，作为设计师，没点儿探索精神怎么能行！不行，我得确定一下，扒一扒代码再说。F12……下边蓝色巴拉巴拉一堆就是图片的路径了，用的是雪碧图的形式，是为了减少图片的加载次数吗！

继续找，新浪微博去看看。……打开首页，似乎发现了什么。在对这个板块的文字颜色进行修改时，图标也在跟着改变。没错，这里就用到了iconfont。

使用iconfont有哪些优势？

1、文件体积小。拿网站logo来说，它的字体文件只有几KB的大小。

2、修改方便。比如，在对其大小进行修改时，只需改变font-size的属性值。如果要改变颜色，只需改变color的属性值。并且支持css3的属性效果。

iconfont制作方法

关于制作方法，应该有很多，有在线制作的，也有专门的软件制作的。我是使用专门的网站在线制作的，网站名称是IcoMoon App，点我，我是链接。

在Ai里面做出图形，导出储存为svg格式。

点击网站顶部的Import Icons按钮上传制作好的svg文件。

上传成功后，在页面中就能看到所上传的图形了，选中它。

点击页面底部Generate Font生成字体。

页面跳转后，注意了注意了注意了！注意两个部分，右上角的编码（此编码在后面写css时需要使用到的），左下角的下载（貌似这个不用介绍）。

iconfont使用方法

使用@font-face为字体命名，并指定它的URL。然后根据需求，为字体设置样式。最后在给指定的地方添加图标的编码，这个编码就是刚才网站中所出现的，现在的情况是一个字体文件里面只有一个图形，如果有多个图形，这个编码就起到了选择性的作用。