前端学习之字体图标(iconfont)

不同的浏览器支持的字体格式是不一样的。

图片有诸多优点，但是缺点也很明显。比如图片不但增加了总文件的大小，也增加了很多额外的"http请求"。这会大大降低网页的性能。更重要的是，图片不能很好的进行缩放，因为图片放大缩小会失真。后面学习移动端响应式，很多情况下希望图标是可以缩放的。因此就需要字体图标（iconfont）。

1.UI人员设计字体图标效果图 2. 前端人员上传生成兼容性字体文件包 3. 前端人员下载兼容字体文件包到本地 4. 把文件包引入HTML页面中

因为第一步是UI人员设计，与前端无关就跳过。 当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。具体操作在下面下载字体包案例中说明。

推荐网站：http://icomoon.io IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

http://fontello.com/ 在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

http://fortawesome.github.io/Font-Awesome/ 更新比较快。目前已经有369个图标了

http://glyphicons.com/ 这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

https://icons8.com/ 提供PNG免费下载，像素大能到500PX

以icomoon字库为例： 1.打开官网点击右上角的icoMoon App     2.进入如下页面选择需要的图标，点击Generate Font     3.进入如下页面，点击download即可下载下来。 ps:也可以点击如下按钮进入更多的字体图标样式中，选择想要的图标样式    

还是回到刚才的icoMoon App页面 ，点击import icons.选择需要上传成字体文件包的svg文件即可生成。    

即将下载下来的字体图标引入html。 下载的文件如下图

效果图：

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做： 把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。 这样就可以基于原有的图标，再选择其他的，然后重新下载下来使用。