移動端字體圖標不顯示的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;}

設置默認行高后。

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com