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

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

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