导入的字体未从特定来源加载答案

【问题标题】：Imported fonts not loading from certain source导入的字体未从特定来源加载
【发布时间】：2016-04-27 23:06:41
【问题描述】：

对于此类通用示例，我提前道歉，因为问题出在专有公司系统上。

我支持允许编辑辅助 CSS 文件以设置页面样式的网络应用程序（在应用程序的限制内）。我正在尝试应用公司范围内使用的非标准字体，但我无权编辑网站的 HTML 或标题，只有 CSS。我尝试在引用实际字体文件 URL（因为它们在我们的公司网站上使用）时在主 CSS 中声明字体系列，但它们从未实际加载。

然后我采用相同的字体系列 sn-p 并为字体声明创建了一个单独的 CSS 文件，并将 URL 更改为指向相对路径中的实际文件（例如：url('fonts/DINWeb.woff '））。我将此 fonts.css 文件与参考字体文件（eot、ttf 和 woff 版本）一起移动到公共 Dropbox 文件夹进行测试。只需使用应用程序 CSS 顶部的以下代码行（URL 已修改）导入 fonts.css 文件，我就能让一切正常工作。

@import url('https://dl.dropboxusercontent.com/.../fonts.css');

问题在于 Dropbox 解决方案仅用于临时测试目的。一旦我确认一切都按预期工作，我将确切的文件夹结构移动到批准使用的外部托管位置。当我将 CSS 中的导入代码更新为新 URL 时，字体不会加载。我可以毫无问题地从浏览器访问 CSS 文件和字体文件，所以我不明白为什么网络应用程序无法加载它。我还在同一个托管位置托管了图像，这些图像可以毫无问题地拉入 Web 应用程序，只是字体有问题。这些文件在托管在 Dropbox 上时有效，但在其他来源上无效。我还仔细检查了 URL 的引用，它们仍然正确，因为文件夹结构从未改变。

任何建议将不胜感激。理想情况下，我只想像我最初尝试的那样直接在网络应用程序的 CSS 中引用公司 URL。如果这不可能，我需要它来处理外部托管的文件，因为 Dropbox 不能用作永久解决方案。

【问题讨论】：

进一步挖掘后，我发现字体被阻止，因为“没有 'Access-Control-Allow-Origin; 请求的资源中存在标头”。这是我第一次处理这个问题。有什么建议可以将其添加到我请求的文件中吗？

标签： html css fonts

【解决方案1】：

基本上你不能从另一个域中托管的一个域加载资源，除非第二个主机说你可以。见CORS

您可以通过将所有内容移至同一域（或强制用户始终位于某个域中）或在响应中添加 Access-Control-Allow-Origin 标头来解决此问题。

如果您可以在服务器中编辑.htaccess 文件，您就可以实现这最后一件事。添加：

Header set Access-Control-Allow-Origin "*"

或将* 替换为您将发出请求的域。

是的，子域是不同的域（abc.com、www.abc.com 和 dl.abc.com 不一样）。

【讨论】：