用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;}

设置默认行高后。

 

移动端字体图标不显示的Bug的更多相关文章

  1. JqGrid分页按钮图标不显示的bug

    开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...

  2. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  3. Chrome 对于 glyphicon 字体图标不显示的解决的方法

    在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到  custom.css 文件,路径为: C:\Users\(username)\App ...

  4. vue iView 打包后 字体图标不显示

    问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...

  5. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  6. bootstraps字体图标无法显示

    使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...

  7. react中iconfont字体图标不显示问题

    如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...

  8. elementUI字体图标不显示问题

    原文链接: 点我 自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/ ...

  9. thinkphp使后台的字体图标显示异常

    thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...

随机推荐

  1. 效验pipeline语法

    目录 一.简介 二.配置 一.简介 因为jenkins pipeline不像JAVA之类的语言那样应用广泛,所以没有相关的代码检测插件. 2018年11月初,Jenkins官方博客介绍了一个VS Co ...

  2. 【js基础】基础数据类型变量为啥有属性?

    1.变量和数值 let a =1 这是一个简单的变量声明,其中"a"是变量,在代码中供程序员或者语法操作的,而1是数值,是我最终需要的东西.为什么不直接使用数值而使用变量?这个就不 ...

  3. libevent 资源链接

    * libevent官网:http://libevent.org/  * libevent API:http://www.monkey.org/~provos/libevent/doxygen-2.0 ...

  4. STL 较详尽总结

    STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...

  5. Wireshark(五):TCP窗口与拥塞处理

    原文出处: EMC中文支持论坛 TCP通过滑动窗口机制检测丢包,并在丢包发生时调整数据传输速率.滑动窗口机制利用数据接收端的接收窗口来控制数据流. 接收窗口值由数据接收端指定,以字节数形式存储于TCP ...

  6. 当更新user表时,页面没有的属性,执行update语句不会更改以前的值

    当更新user表时,页面没有的属性,执行update语句不会更改数据库表的值.不会用NULL值去填充

  7. visual studio c++项目文件分类混乱整理

    演示环境: win10 + vs2015 (下面简称VS)+ visual assist (下面简称VA) 1.混乱 装了VA的VS,有个快捷键,可快速切换 .h 文件和 .cpp(.cc, .cxx ...

  8. 【LeetCode】208. Implement Trie (Prefix Tree) 实现 Trie (前缀树)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:Leetcode, 力扣,Trie, 前缀树,字典树,20 ...

  9. Springcloud-alibaba学习实践(2)- nacos&Eureka Server服务注册实践

    前言:上一篇已搭建好了springcloud服务注册中心(Nacos&Eureka Server),本篇继续代码实践,注册服务到服务中心,本篇只是演示了两种注册中心,后续我们以Nacos注册中 ...

  10. 使用Xcode 制作自定义storyboard启动界面,供uniAPP使用。

    1新建项目 想要全屏显示并适应所有尺寸的iPad和iphone 需要用750*1624 2X 和 1125 * 2436 3X大小的图片 这里做完就可以导出文件了 把文件和图片放到一起 见下图 命名规 ...