## 什么是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比較多，而數字計算的方式更加穩定。
