font字体文件跨域

最近在把项目里的css,js,imgae这些文件放到一个项目里做静态资源,然后JSP通过静态资源路径来引入这些资源。

修改完测试的时候,发现浏览器控制台报了“font from origin”这个错误。

网上查了发现是字体文件跨域导致的,也就是在引用svg这类字体静态文件时,会有跨域的情况产生。

解决办法就是Access-Control-Allow-Origin为*就可以了。

 

参考网址:

http://blog.sina.com.cn/s/blog_6ad624380102vlp0.html

http://blog.sina.com.cn/s/blog_40ed55a10102wuke.html

http://blog.csdn.net/xiaokui_wingfly/article/details/51496134

http://bbs.miaov.com/forum.php?mod=viewthread&tid=9566

 

转载于:https://www.cnblogs.com/shubiao/p/6171951.html

前端的@font-face在跨域问题上会遇到一些挑战。当字体文件存放在不同的域名或端口上时,浏览器会默认遵循同源策略,即只有相同域名、端口和协议的资源才可以被加载和使用。这就导致了在使用@font-face时,字体文件跨域请求会被浏览器阻止。 为了解决这个问题,可以使用nginx反向代理实现跨域请求。通过在nginx配置中添加反向代理规则,将字体文件的请求转发到指定的服务器上,从而实现字体文件跨域加载。这样,在前端代码中使用@font-face时,即使字体文件存放在不同的域名或端口上,也可以正常加载和使用字体效果。 同时需要注意的是,使用@font-face会增加用户流量消耗,并且在首次加载字体文件时可能会导致页面打开延迟。这是因为浏览器需要下载字体文件才能显示字体效果。但是,@font-face的好处是即使系统没有安装该字体,我们仍然可以使用它来呈现特定的字体效果。 如果你对前端的@font-face跨域问题具体的配置和实现细节感兴趣,可以参考一些相关的网址,如W3CPlus、Stack Overflow、Dynamic Drive等。它们提供了一些关于@font-face跨域问题的解决方案和实践经验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决在CSS中使用@font-face指定Web字体时,链接远程字体文件失败](https://blog.csdn.net/weixin_45400833/article/details/124338545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS3魔法堂:认识@font-face和Font Icon](https://blog.csdn.net/weixin_33722405/article/details/90150329)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值