移動端字體圖標不顯示的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官網地址：
/* 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;}
設置默認行高后。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。