移动端字体图标不显示的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