IconFont的使用方法

IconFont的作用就是用字體格式來取代圖片、特殊字體的展示，用的比較多的就是一些純色的圖片，具體主要有當前CSS3屬性裏的自定義字體（@font-face）來實現。

1、先來說說它的優缺點：

 優點：體積比圖片小，可以變化大小和顏色，而圖片則是不可以的。

 缺點：由於是字體模式，所以只支持純色，多顏色則是不支持、

2、如何使用：

  2.1、字體的格式，不同的瀏覽器支持的字體格式是不一樣的，具體如下：

    *webkit/safari:支持True Type/Open Type(.ttf),IOS4.2+支持.ttf,IOS4.2以下只支持SVG字體；

    *Chrome:除webkit支持的以外，從Chrome 6開始，開始支持woff格式；

    *Firefox：支持.tff和.off，從Firefox3.6開始支持woff格式；

    *Opera:支持.tff、.off、.svg。尚不支持woffOpera 11kaishi zhichi woff；

    *IE：只支持eot格式，IE9開始支持woff。

  2.2具體使用

    首先需要用是字體軟件（如FontCreator、FontLab）做好該字體，在用各種線上工具轉換爲葛洪字體格式：

        *https://www.kirsle.net/wizards/ttf2eot.cgi 在線轉ttf爲eot格式；

        *http://www.fontsquirrel.com/tools/webfont-generator強大的在線ttf爲eot、woff等字體格式

        *另外，eot文件必須添加域名白名單纔可以使用，這裏推薦使用CreateMyEOT：

幾個格式的字體都轉換好後，在CSS代碼裏用font-face定義該字體就可以了。

html代碼：

<div class="box">

    <span  class="icon-home"></span>

    &nbsp;icon-home

</div>

<div class="box">

    <span  class="icon-home-2"></span>

    &nbsp;icon-home

</div>

CSS代碼：

@font-face {

    font-family: 'icomoon';

    src: url('fonts/icomoon.eot');/**IE9**/

    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),/**IE6-IE8**/

        url('fonts/icomoon.svg#icomoon') format('svg'),/** iOS 4.1-**/

        url('fonts/icomoon.woff') format('woff'),/**chrome、firefox**/

        url('fonts/icomoon.ttf') format('truetype');/**chrome、firefox、opera、Safari, Android, iOS 4.2+**/

    font-weight: normal;

    font-style: normal;

}

.box span{

  color:#ff0;

  font-size:20px; 

  font-family: 'icomoon'; /**引入font-face定義的字體名稱**/      

}

/*content裏的數值就是iconfont圖標裏對應的數值*/

.icon-home:before {

    content: "\21";

}

.icon-home-2:before {

    content: "\23";

}