Weex開發之正確使用iconfont

最近，在使用Weex開發一款移動電商應用，期間須要用到大量的圖標，不經意間想到了阿里的iconfont。

那麼咱們如何使用iconfont呢？這裏給你們簡單介紹下iconfont的使用步驟：

一、先進入iconfont官網http://www.iconfont.cn； 二、新建一個圖標項目，以下圖：

三、在本身的iconfont項目中查找，點擊查看在線連接，以下圖：

四、點擊【個人項目】，而後點擊生成代碼，將生成的代碼添加到Weex項目中，以下圖：

5，在Weex 項目的組件初始化函數中，引入圖片集，注意用駝峯命名。

created(){
    let domModule = weex.requireModule('dom');
    domModule.addRule('fontFace',{
      'fontFamily': "iconfont",
      'src': "url('http://at.alicdn.com/t/font_521216_w212618qmo.ttf')"
    })
  }
複製代碼

6，而後，就能夠在Weex頁面中使用這些圖標了。例如：

<text class="iconfont bar-ic">&#xe644;</text>

  <style>
   .iconfont {
        font-family:iconfont;  
    }
   .bar-ic{
        padding-top: 14px;
        font-size: 38px;
        color: red;
    }
  </style>
複製代碼

運行效果以下：

iconfont支持三種引用方式：unicode引用、font-class引用和symbol引用。

unicode引用

unicode是字體在網頁端最原始的應用方式，特色是：

• 兼容性最好，支持ie6+，及全部現代瀏覽器。
• 支持按字體的方式去動態調整圖標大小，顏色等等。
• 可是由於是字體，因此不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。

unicode使用步驟以下： 第一步：拷貝項目下面生成的font-face：

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
複製代碼

第二步：定義使用iconfont的樣式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
複製代碼

第三步：挑選相應圖標並獲取字體編碼，應用於頁面

<i class="iconfont">&#x33;</i>
複製代碼

font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。使用步驟以下： 第一步：拷貝項目下面生成的fontclass代碼

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
複製代碼

第二步：挑選相應圖標並獲取類名，應用於頁面

<i class="iconfont icon-xxx"></i>
複製代碼

symbol引用

這是一種全新的使用方式，也是平臺目前推薦的用法。與上面兩種相比具備以下特色：

• 支持多色圖標了，再也不受單色限制。
• 經過一些技巧，支持像字體那樣，經過font-size,color來調整樣式。
• 兼容性較差，支持 ie9+及現代瀏覽器。
• 瀏覽器渲染svg的性能通常，還不如png。

使用步驟以下： 第一步：拷貝項目下面生成的symbol代碼

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
複製代碼

第二步：加入通用css代碼

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
複製代碼

第三步：挑選相應圖標並獲取類名，應用於頁面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
複製代碼

參考：iconfont使用技巧