IconFont的使用方法

标签：浏览器   firefox   chrome   opera   safari   图标字体   

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";

}

本文出自 “穆穆” 博客，谢绝转载！

IconFont的使用方法

标签：浏览器   firefox   chrome   opera   safari   图标字体   

原文地址：http://5858783.blog.51cto.com/5848783/1699966