ICONFONT的使用方法

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)做好该字体,再用各种线上工具转换为各种字体格式:

几个格式的字体都转换好后,在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的使用方法

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭