解决firefox和IE9对icon font字体的跨域访问问题

2014-05-14阅读(10416)评论(0)

W3Cways.com 微信公众号

现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下:

  • IE:从IE4开始支持eot格式,IE9开始支持woff。
  • webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,iOS 4.2以下只支持SVG字体; Safari5.1+ 开始支持woff格式
  • Chrome:除webkit支持的以外,从Chrome 6开始,开始支持woff格式;
  • Firefox:支持.ttf和.otf,从Firefox 3.6开始支持woff格式;
  • Opera:支持.ttf、.otf、.svg。 Opera 11开始支持woff;
  • iPad, iPhone and Android 3.0+ 支持SVG fonts

在使用icon font字体的时候,发现在firefox 及ie9下icon font字体不显示,也就是通常说的firefox和IE9不支持对icon font字体的跨域访问。

解决方法

可以将字体文件放到同域的服务器上或修改服务器配置。
把如下代码加到你的服务器配置文件中去,我用的是apache2,这里我的配置文件路径为Apache2\conf\httpd.conf

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

然后重启apache

再刷新即可,建议用ctrl+f5刷新页面(清除缓存)。
原文出处:点击查看

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 解决firefox和IE9对icon font字体的跨域访问问题

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们