IconFont的使用方法

IconFont的作用就是用字体的格式来取代图片、特殊字体的展示，用得比较多的就是一些纯色的图标，具体主要由当前css3属性里的自定义字体(@font-face)来实现。

1、先来说下它的优缺点：

优点：体积比图片小，可以变化大小和颜色，而图片则是不可以的；

缺点：由于是字体模式，所以只支持纯色，多颜色不支持。

2、该如何使用

　　2.1、字体的格式，不同浏览器支持的字体格式是不一样的，具体如下：

• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；
• Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
• Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
• Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11开始支持WOFF(多谢Apostle提醒~~)；

• IE：只支持eot格式，IE9开始支持woff。

　　2.2、具体使用

　　首先需要用字体软件（如FontCreator、FontLab）做好该字体，再用各种线上工具转换为各种字体格式：

• http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式；

• http://www.fontsquirrel.com/fontface/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";
}