css - 为什么这些字体不能跨服务器加载？

Question

我在一台服务器(一个免费的网络主机)上有一个演示页面，它通过谷歌网络字体以及从同一服务器上的字体文件夹加载字体。它通过 CSS 中的非相对 URL 加载本地字体。 Google 字体和本地字体都可以在该服务器上正常工作。

但是，当我尝试在另一台服务器(也是用于测试的免费 Web 主机)上加载该页面时，字体不会加载——它们只是显示为一个 0KB 的请求，没有错误地完成。

这是来自 demo on the first server 的请求:

这是来自 same page on another server :

为什么会这样？

编辑:刚刚注意到控制台中的这些错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://iansan5653.host22.com/fonts/socicon-webfont.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

socicon-webfont.woff downloadable font: download failed (font-family: "Socicon" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://iansan5653.host22.com/fonts/socicon-webfont.woff

如果这与跨域请求有关，那么 Google 字体如何加载跨域？我该如何解决这个问题？

Answer 1

“同源策略”阻止了从您的第一台服务器加载字体的请求。您可以阅读更多关于“同源策略”的信息 here

您可以采用以下两种方法之一解决此问题:

1. 简单的方法是将字体从 host22.com 服务器移动到您的第二个服务器(当前服务器)，即 atwebpages.com。更新您的代码以从同一服务器加载。这将解决您的问题。

2. 另一种方法需要 iansan5653.host22.com 的服务器输出以下 header :

   访问控制允许来源:http://iansan5653.atwebpages.com

   iansan5653.atwebpages.com 是您当前的服务器。这将允许您的第二台服务器从您的第一台服务器请求资源。您可以咨询您的托管服务提供商，了解是否以及如何启用此类 header 输出。