移动端字体图标不显示的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;}
设置默认行高后。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。