您的位置：首页 > 移动开发

font-face 移动端字体图标不显示的Bug

2016-11-01 14:50 609 查看

这个问题非常的常见，当使用自定义的字体有时候在移动端不显示字体图标。一句话：加载顺序问题。

移动端有问题的加载顺序：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+*/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： font-face 字体移动

相关文章推荐

新的分享

章节导航