现在的位置: 首页 -> 前端学习 -> JS前端 -> 解决IE浏览器字体跨域的2种办法

解决IE浏览器字体跨域的2种办法

2019-09-26 20:04评论数 1 ⁄ 被浏览 330 views+

项目中用到了矢量图标字体,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的形式


①打开网站:https://transfonter.org/


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



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



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


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

 

文章出自:https://www.daixiaorui.com/read/283.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 1 条评论  @我要评论

  1. 1楼36加盟网 : 2019-10-27 20:09:00 评论说: @回复

    如果是其他web服务器,如:apache、IIS,请参考相应的方法解决。http://www.36t.cn招商加盟较方便快捷,但是如果不方便修改web服务器配置,可以通过下面的方式2解决。

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *