移动端字体图标不显示的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 解答: 发现在别的 ...
随机推荐
- 效验pipeline语法
目录 一.简介 二.配置 一.简介 因为jenkins pipeline不像JAVA之类的语言那样应用广泛,所以没有相关的代码检测插件. 2018年11月初,Jenkins官方博客介绍了一个VS Co ...
- 【js基础】基础数据类型变量为啥有属性?
1.变量和数值 let a =1 这是一个简单的变量声明,其中"a"是变量,在代码中供程序员或者语法操作的,而1是数值,是我最终需要的东西.为什么不直接使用数值而使用变量?这个就不 ...
- libevent 资源链接
* libevent官网:http://libevent.org/ * libevent API:http://www.monkey.org/~provos/libevent/doxygen-2.0 ...
- STL 较详尽总结
STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...
- Wireshark(五):TCP窗口与拥塞处理
原文出处: EMC中文支持论坛 TCP通过滑动窗口机制检测丢包,并在丢包发生时调整数据传输速率.滑动窗口机制利用数据接收端的接收窗口来控制数据流. 接收窗口值由数据接收端指定,以字节数形式存储于TCP ...
- 当更新user表时,页面没有的属性,执行update语句不会更改以前的值
当更新user表时,页面没有的属性,执行update语句不会更改数据库表的值.不会用NULL值去填充
- visual studio c++项目文件分类混乱整理
演示环境: win10 + vs2015 (下面简称VS)+ visual assist (下面简称VA) 1.混乱 装了VA的VS,有个快捷键,可快速切换 .h 文件和 .cpp(.cc, .cxx ...
- 【LeetCode】208. Implement Trie (Prefix Tree) 实现 Trie (前缀树)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:Leetcode, 力扣,Trie, 前缀树,字典树,20 ...
- Springcloud-alibaba学习实践(2)- nacos&Eureka Server服务注册实践
前言:上一篇已搭建好了springcloud服务注册中心(Nacos&Eureka Server),本篇继续代码实践,注册服务到服务中心,本篇只是演示了两种注册中心,后续我们以Nacos注册中 ...
- 使用Xcode 制作自定义storyboard启动界面,供uniAPP使用。
1新建项目 想要全屏显示并适应所有尺寸的iPad和iphone 需要用750*1624 2X 和 1125 * 2436 3X大小的图片 这里做完就可以导出文件了 把文件和图片放到一起 见下图 命名规 ...