## 什么是iconfont
为了解决image的诸多问题，一种新的图标显示方法应运而生，那就是iconfont。iconfont，顾名思义，就是icon + font，即以字体的方式来显示图标，这个十分好理解，因为中文有时候也像一个个小图形。iconfont可以完美解决以上的问题，并具有以下的优点：
1. 由于请求的是一整个文件字体，所以减少了http的请求
2. 可以像字体一样，任意变换大小和颜色；
3. 矢量图，不会发生放大模糊的问题
4. 结合CSS3的text-shadow，transform这些功能可以给字体添加一些旋转，阴影和透明度的视觉特效。
5. 强兼容性，他的实现方式是使用CSS3的font-face, 但是这个属性从IE4开始就支持，可以完美适配IE6及以上的浏览器。
## iconfont的使用方法
iconfont一共有三种使用方式，具体参照阿里妈妈图标库的[官方文档](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=code)
### 方法1 unicode 方式
目前我们系统采用的是这种方式，这种方式的好处就是完美适配IE8，核心的思想就是这两段代码
unicode是字体在网页端最原始的应用方式，特点是：
* 兼容性最好，支持ie6+，及所有现代浏览器。
* 支持按字体的方式去动态调整图标大小，颜色等等。
* 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
**注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式**
unicode使用步骤如下：
第一步：拷贝项目下面生成的font-face
```
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, safari, android, IOS 4.2+ */
url('iconfont.svg#iconfont') format('svg'); /* IOS 4.1- */
}
/*
.ttf (True Type Fonts) Firefox、Chrome、Safari、Opera、Android、IOS 4.2+
.eot (Embedded OpenType) IE 9+
.woff
.woff2
.otf (OpenType Fonts) Safari
.svg IOS 4.1-
*/
```
第二步：定义使用iconfont的样式
```
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
```
第三步：挑选相应图标并获取字体编码，应用于页面
```
<i class="iconfont">3</i>
```
>* 为啥IE9的设置要单拎出来？
微软爸爸搞事情，在IE9的兼容模式下，是不支持后面那种书写方式的，所以单拎出来，直接适配IE9
>* 为啥IE6-IE8的URL上有个#iefix？
微软最初支持font-face这个功能的时候，font-face并没有收录到标准中，低版本的IE会把url里面第一个引号到最后一个引号都当成URL，解析出来一定是404，所以加了一个IEfix，表示后面的是锚点的内容，帮助浏览器正确解析，这个锚点叫什么并不重要。
>* format 是什么意思？
不同浏览器解析的字体格式不一样，format就是告诉各种版本的浏览器，你支持这样的字体吗，支持的话就找这个URL
>* -webkit-font-smoothing: antialiased; 这是啥意思？
这个是因为，字体在放大的时候，其边缘会出现锯齿状的样式，显示出来颗粒感很重，不够美观。而这个属性，叫做抗锯齿特性，功能就是把这些突出的小毛茬都切掉。而且要注意，这个属性只在Mac电脑上是有效的，因为苹果认为应该显示设计最原本的样式，这样屏幕上展示的内容和打印机打印出来的内容一样，但是微软认为展示的样式符合大众认识的美观更加重要，所以Windows7以上会自动开启ClearType的抗锯齿方法。
>* 那-webkit-text-stroke-width: 0.2px;又是有啥用？
用抗锯齿技术把小毛茬切掉以后，icon相当于比预想的要细了，使用这个功能，给图标描个0.2px的边，完美符合预期
### 方式2 font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
没啥好说的和unicode差不多，只不过用:after伪元素使用，我试了一下，IE8是支持伪元素的。但是不支持大小的修改，所以这种方式只能兼容IE9及以上的方式
与unicode使用方式相比，具有如下特点：
* 兼容性良好，支持ie8+，及所有现代浏览器。
* 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
* 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
* 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：拷贝项目下面生成的fontclass代码：
```
@font-face {
font-family: 'sv-icomoon';
src: url('font/sv-icomoon.eot?tk8m9k'); /* IE9 */
src: url('font/sv-icomoon.eot?tk8m9k#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/sv-icomoon.ttf?tk8m9k') format('truetype'), /* chrome, firefox, opera, safari, android, IOS 4.2+ */
url('font/sv-icomoon.woff?tk8m9k') format('woff'),
url('font/sv-icomoon.svg?tk8m9k#sv-icomoon') format('svg'); /* IOS 4.1- */
font-weight: normal;
font-style: normal;
}
[class^="sv-icon-"], [class*=" sv-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'sv-icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sv-icon-search:before {
content: "\e900";
}
.sv-icon-user:before {
content: "\e904";
}
.sv-icon-password:before {
content: "\e905";
}
```
第二步：挑选相应图标并获取类名，应用于页面：
```
<i class="sv-icon-user"></i>
```
### 方式3 symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。
使用步骤如下：
第一步：拷贝项目下面生成的symbol代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css代码（引入一次就行）：
```
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
```
第三步：挑选相应图标并获取类名，应用于页面：
```
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
```
> * vertical-align: -0.15em; 这么设置是为啥?
因为SVG虽然可以使用font的方式对icon进行大小和颜色的变换，但是本质上不是font，而更像一张图片。这导致如果icon后面跟着文字的话，文字会按照baseline对齐icon的底端，为了让SVG表现的和font一样，就把后面的文字对齐icon的baseline位置，因为一般baseline距离bottom的距离是0.15，所以这个数值设置成了0.15em。至于为什么要采用这种看上去意义不明的计算方式而不是直接使用bottom属性，那是因为bottom这个属性在低版本浏览器（尤其是IE8）上产生的bug比较多，而数字计算的方式更加稳定。
