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


.iconfont{line-height:1;}
设置默认行高后。

移动端字体图标不显示的Bug的更多相关文章
- JqGrid分页按钮图标不显示的bug
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- Chrome 对于 glyphicon 字体图标不显示的解决的方法
在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 custom.css 文件,路径为: C:\Users\(username)\App ...
- vue iView 打包后 字体图标不显示
问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...
- webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法
webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图 element ui字体图标不显 ...
- bootstraps字体图标无法显示
使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...
- react中iconfont字体图标不显示问题
如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...
- elementUI字体图标不显示问题
原文链接: 点我 自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/ ...
- thinkphp使后台的字体图标显示异常
thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...
随机推荐
- MySQL数据库如何实现增量备份
1 .通过SHOW VARIABLES LIKE '%log_bin%';查看数据库是否开启增量备份log_bin=ON则为开启log_bin=OFF则为关闭 2 .修改mysql配置文件mysql. ...
- mysql优化大全(转自别人 )
文章出处:https://blog.csdn.net/weixin_38112233/article/details/79054661 数据库优化 sql语句优化 索引优化 加缓存 读写分离 分区 分 ...
- 自定义 UITableViewCell 的 accessory 样式
对于 UITableViewCell 而言,其 accessoryType属性有4种取值: UITableViewCellAccessoryNone, UITableViewCellAccessory ...
- UMDCTF 2021
6道pwn题,4道可以做.剩下一道题是arm架构,一道题是内核,溜了溜了. Jump_Not_Easy 1 from pwn import * 2 3 p = process('./pwn') 4 e ...
- [BUUCTF]PWN1——test_your_nc
[BUUCTF]PWN1-test_your_nc 题目网址:https://buuoj.cn/challenges#test_your_nc 步骤: 根据题目提示,nc一下靶场 2.nc连接上后ls ...
- 合并函数Combiner.Combine…(Power Query 之 M 语言)
按相同分隔符合并: =Combiner.CombineTextByDelimiter("分隔符", 引号字符) 分隔符 直接输入 特殊符号 制表符:#(tab) 回车:#(cr) ...
- LuoguP7694 [COCI2009-2010#4] AUTORI 题解
Content 科学论文会大量引用一些早期的著作,因此在一个论文中出现两种不同的命名约定并不少见.这两种不同的命名约定分别是: 长变体,由每个作者姓氏的完整单词由连字符连接而成,例如 Knuth-Mo ...
- java 编程基础:注解(Annotation Processing Tool)注解处理器 利用注解解读类属性生成XML文件
APT的介绍: APT(Annotation Processing Tool)是一种注解处理工具,它对源代码文件进行检测,并找出源文件所包含的注解信息,然后针对注解信息进行额外的处理. 使用APT工具 ...
- java 网络编程基础 TCP/IP协议:服务端ServerSocket;客户端Socket; 采用多线程方式处理网络请求
1.Java中客户端和服务器端通信的简单实例 Java中能接收其他通信实体连接请求的类是ServerSocket,ServerSocket对象用于监听来自客户端的Socket连接,如果没有连接,它将一 ...
- shiro验证时,当authenticationStrategy为AllSuccessfulStrategy时
shiro验证时,当authenticationStrategy为AllSuccessfulStrategy时,如果某一个验证出错,那么 PrincipalCollection principalCo ...