什么原因会导致font-face字体图标在电脑浏览器下无法正常显示?

葉猜
  • 100

图片描述
在手机上显示正常,在电脑浏览器如上。
*一开始其实是可以显示的,后来把谷歌浏览器更新到38版本后就不显示,过两天再测试,火狐也不显示了,所以估计不是谷歌浏览器的问题,但实在无法找到原因,页面有载到字体文件,包含eot,tff,woff,evg,所以也不是支持问题,也试过十六进制转十进制,同样无效,跪求解答。

@font-face {
    font-family: 'icon-font';
    src:url('/assets/fonts/jiaicon.eot');
    src:url('/assets/fonts/jiaicon.eot') format('embedded-opentype'),
        url('/assets/fonts/jiaicon.woff') format('woff'),
        url('/assets/fonts/jiaicon.ttf') format('truetype'),
        url('/assets/fonts/jiaicon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class$="-icon"], [class*="-icon "] {
    font-family: 'icon-font';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
回复
阅读 17.7k
3 个回答

对于火狐浏览器,需要字体所在服务器设置允许跨域访问。以Apache为例,先开启 headers 模块,再在字体的文件夹里放置一个 .htaccess 文件,里面的内容如下

#允许火狐浏览器跨域取字体
<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏