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

本文介绍了解决矢量图标字体在IE浏览器中出现跨域问题的两种方法:一是通过修改web服务器配置,如nginx,添加Access-Control-Allow-Origin头;二是将字体文件转换为base64编码并嵌入到样式表中。这些方法适用于不同的应用场景。

项目中用到了矢量图标字体,IE浏览器提示字体跨域了,应该是不同浏览器策略的问题。

方式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即可。

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值