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

Question

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

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

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

这是来自same page on another server：

为什么会这样？

编辑：刚刚在控制台中注意到这些错误：

跨域请求被阻止：同源策略不允许读取 远程资源在 http://iansan5653.host22.com/fonts/socicon-webfont.woff。这可以是 通过将资源移动到同一域或启用 CORS 来修复。

socicon-webfont.woff 可下载字体：下载失败（字体系列： “Socicon”风格：正常重量：正常拉伸：正常 src 指数：1）：坏 URI 或跨站点访问不允许来源： http://iansan5653.host22.com/fonts/socicon-webfont.woff

如果这与跨域请求有关，Google Fonts 是如何跨域加载的？我该如何解决这个问题？

Answer 1

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

您可以通过以下两种方法之一解决此问题：

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

2. 另一种方法是要求 iansan5653.host22.com 的服务器输出以下标头：

   Access-Control-Allow-Origin: http://iansan5653.atwebpages.com

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