IconFont的使用方法

IconFont的做用就是用字體的格式來取代圖片、特殊字體的展現,用得比較多的就是一些純色的圖標,具體主要由當前css3屬性裏的自定義字體(@font-face)來實現。css

一、先來講下它的優缺點:html

優勢:體積比圖片小,能夠變化大小和顏色,而圖片則是不能夠的;css3

缺點:因爲是字體模式,因此只支持純色,多顏色不支持。web

二、該如何使用chrome

  2.一、字體的格式,不一樣瀏覽器支持的字體格式是不同的,具體以下:瀏覽器

  • 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。svg

  2.二、具體使用工具

  首先須要用字體軟件(如FontCreator、FontLab)作好該字體,再用各類線上工具轉換爲各類字體格式:post

幾個格式的字體都轉換好後,在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";
}
相關文章
相關標籤/搜索