移動端字體圖標不顯示的Bug

用16進制編碼的字體圖標在部分小米機型顯示不正常。

測試機型：小米1，小米1s，小米2
瀏覽器：微信6.1內置瀏覽器，QQ瀏覽器 5.7 X5內核
字體圖標：不顯示
svg圖標：顯示正常

以下來自額微信內置瀏覽器的截圖，字體圖標不顯示。

內置瀏覽器，uc瀏覽器，正常顯示，以下為內置瀏覽器截圖。

 

如 Glyphicons 官網的字體圖標就顯示不正常，svg圖標顯示正常。

Glyphicons 官網：http://glyphicons.com/

截圖來自QQ瀏覽器（新版微信采用QQ瀏覽器內核）訪問Glyphicons 官網，右側杯子部分是SVG的圖片，顯示正常；右側紅色標簽隔壁空白部分，一堆的iconfont圖標都顯示異常。

 

 

國內阿里Iconfont：http://www.iconfont.cn/    官網采用SVG繪制正常顯示，下載回來的demo顯示不正常。

以下截圖來自阿里Iconfont下載回來的demo。

 

 

 偶爾發現icomoon首頁的圖標采用了字體圖標，但是能正常顯示。
icomoon官網地址： https://icomoon.io/

/* icomoon 的@font-face聲明字體如下*/
   @font-face {
        font-family: 'icomoonio';
        src: url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.eot?bqv7mo");
        src: url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.eot?#iefixbqv7mo") format("embedded-opentype"),
        url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.svg?bqv7mo#icomoonio") format("svg"),
        url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.woff?bqv7mo") format("woff"),
        url("https://s3.amazonaws.com/icomoon.io/4/icomoonio/icomoonio.ttf?bqv7mo") format("truetype");
        font-weight: normal;
        font-style: normal
    }
/*定義使用iconfont的樣式*/
    .ff-icomoon {
        font-family: 'icomoonio'
    }
/*獲取字體編碼，應用於頁面*/
    [data-icon]:before {
        font-family: 'icomoonio';
        content: attr(data-icon);   /*獲取標簽的data-icon字體編碼，與平常我們的方式不太一樣*/
        speak: none;                /*取消發音*/
        line-height: 0
    }  

 

各種分析調試對比后發現，原來是加載順序有問題。

移動端有問題的加載順序：eto，woff，ttf，svg

//有兼容問題的字體圖標加載順序
@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

 

移動端字體圖標加載順序應該為 eto,svg,woff,ttf(把SVG放到前面) 

//移動端字體圖標
@font-face {font-family: "iconfont";
  src: url('../font/iconfont.eot'); /* IE9*/
  src: url('../font/iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
  url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../font/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 
}

 

 

 

 不過用fiddler抓包，只看到手機請求了svg，兼容情況良好。

 

SVG字體兼容如下圖： http://caniuse.com/#search=svg%20font

 

據說安卓4.1一下不支持SVG，但是沒機器，測試不了，有Android 2.3的朋友幫忙測一下給個留言感激不盡。

 

 

在ios系統圖標會往下錯位，如下圖：

 

設置一下默認行高為1即可。

.iconfont{line-height:1;}

設置默認行高后。