托管在另一个域上的 Web 字体答案

【问题标题】：Web font hosted on another domain托管在另一个域上的 Web 字体
【发布时间】：2011-04-16 14:57:26
【问题描述】：

我想知道是否可以在另一个域上托管 webfonts，我的 CSS 托管在 Amazon CloudFront 和我的 webfonts 上，但它们没有显示，当我的 css 在本地时很好。

这是我在 CloudFront 上的 style.css：

@font-face {
    font-family: 'Aller';
    src: url('/app/files/fonts/allerdisplay-webfont.eot');
    src: local('☺'), url('/app/files/fonts/allerdisplay-webfont.woff') format('woff'), url('/app/files/fonts/allerdisplay-webfont.ttf') format('truetype'), url('/app/files/fonts/allerdisplay-webfont.svg#webfontLZ8nc4vC') format('svg');
    font-weight: 900;
    font-style: normal;
}

样式表使用子域托管在 CloudFront 上：static.mydomain.com/style.css Webfont 可以从以下位置下载：static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf

不幸的是，当从 mydomain.com 调用样式表时，它不会加载它。我想知道这是否是一个限制或类似的东西。

谢谢

【问题讨论】：

标签： css dns cloud cdn webfonts

【解决方案1】：

样式声明中URL的绝对路径应该没问题。

在上面的代码中，您有相对路径 URL。
您需要一个绝对路径 URL，例如：

“http://static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf”（绝对）

-- 不是--

“/app/files/fonts/allerdisplay-webfont.ttf”（相对）

理论上，根据您的子域的架构，您可能能够找到一种方法来维护相对 URL，但这不值得麻烦。只需使用绝对的就可以了。

[以下之前的建议是在相关代码发布之前发布的] 但是Google Web Fonts 通过将整个样式表移动到云端来实现这一切。如果你不能让它在样式表中运行，你可以尝试创建一个单独的样式表。

但是请注意，要获得真正的跨浏览器兼容性，您需要一堆不同的字体文件格式……这可能是问题所在。 FontSquirrel 有一个字体工具包生成器，您可能想查看它。

【讨论】：