ie浏览器设置允许跨域_解决IE浏览器字体跨域的2种办法

项目中用到了矢量图标字体，chrome浏览器都好好的，IE浏览器提示字体跨域了，应该是不同浏览器策略的问题。错误提示如下：

CSS3117: @font-face 跨源请求失败。资源访问受限。

iconfont.eot

CSS3117: @font-face 跨源请求失败。资源访问受限。

iconfont.woff

CSS3117: @font-face 跨源请求失败。资源访问受限。

iconfont.ttf

我找到了2种方式解决此问题。

方式1：修改web服务器的配置(推荐)

拿nginx来说，在对应的域名配置下加入“add_header Access-Control-Allow-Origin *;”(*号也可以改为具体的某个域名)，如下：server {

listen       80;

......

location / {

add_header Access-Control-Allow-Origin *;

......

}

}

如果是其他web服务器，如：apache、IIS，请参考相应的方法解决。次方式较方便快捷，但是如果不方便修改web服务器配置，可以通过下面的方式2解决。

方式2：通过base64的形式

②上传“ttf”格式的字体文件，Family support和Base64 encode选项打开。

③点击convert按钮后，会生成一个下载文件，如下图，下载即可。

④下载下来后，得到一个压缩文件，将压缩文件解压，网站使用stylesheet.css即可。

处理完后，刷新浏览器，图标便出来了。至此，解决完毕。