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。
尚不支持woffOpera 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> icon-home </div> <div class="box"> <span class="icon-home-2"></span> 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"; }