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

轉載于:https://www.cnblogs.com/lch880/p/3359222.html

總結

以上是生活随笔為你收集整理的IconFont的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。