【武汉-第四十九期】Iconfont的原理和用法

一 背景介绍

1.利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。

2.为什么要用 icon fonts？

                除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：

文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。

加载性能好：因为图标都被打包进一套字体内，http 请求 减少。这如同我们常用的 css 雪碧图 技术。

支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…

兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。

二 知识剖析

怎么使用？

首先，加载一个包含数百图标的 Icon Font，却只使用其中几个图标，非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题

这里介绍两种使用方法。

一个是font-class引用和symbol引用

三 常见问题

字体图标在safair或chrome浏览器下被加粗

四 解决方案

这个现象是由于字体图标存在半个像素的锯齿，在浏览器渲染的时候直接显示一个像素了，导致在有背景下的图标显示感觉加粗；所以在应用字体图标的时候需要对图标样式进行抗锯齿处理，CSS代码设置如下：

.iconfont{-webkit-font-smoothing: antialiased;}

五 编码实战

Iconfont：demo 

这里用的是font-class引用

在阿里矢量库里下载的iconfont.css里可以修改iconfont的样式

font-family:"iconfont" !important;
font-size:xxpx;
color:xxx

在html代码里

<i class="iconfont icon-rili"></i>

用i标签来引入iconfont

icon-xxxx 后面的具体代码在iconfont.css的底部有。

六.拓展思考

如何添加彩色的iconfont

编码实战：

在阿里矢量库里下载了彩色的iconfont之后，用一种全新的引用方式。

symbol引用

第一步：拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_1473319176_4914331.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

注意这里不是用i标签引用了，复制一下代码，然后再下载的iconfont.css 找到要引用的样式，改变下面的xxx

<svg class="icon" aria-hidden="true">    <use xlink:href="#icon-xxx"></use></svg>

七.更多讨论

了解Iconfont的制作