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

来源：互联网发布：笔杆子软件官网编辑：程序博客网时间：2024/04/25 07:34

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

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

0 0