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

设置默认行高后。