关闭

ICONFONT的使用方法

1422人阅读 评论(0) 收藏 举报

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9714次
    • 积分:260
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:10篇
    • 译文:0篇
    • 评论:0条