IconFont的做用就是用字體的格式來取代圖片、特殊字體的展現,用得比較多的就是一些純色的圖標,具體主要由當前css3屬性裏的自定義字體(@font-face)來實現。css
一、先來講下它的優缺點:html
優勢:體積比圖片小,能夠變化大小和顏色,而圖片則是不能夠的;css3
缺點:因爲是字體模式,因此只支持純色,多顏色不支持。web
二、該如何使用chrome
2.一、字體的格式,不一樣瀏覽器支持的字體格式是不同的,具體以下:瀏覽器
IE:只支持eot格式,IE9開始支持woff。svg
2.二、具體使用工具
首先須要用字體軟件(如FontCreator、FontLab)作好該字體,再用各類線上工具轉換爲各類字體格式:post
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"; }