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

发布于 2024-10-18 04:30:34 字数 761 浏览 3 评论 0原文

我想知道是否可以在另一个域上托管网络字体, 我的 CSS 和我的 webfonts 都托管在 Amazon CloudFront 上,但它们没有显示,当我的 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 调用样式表时,它不会加载它。我想知道这是否是一个限制或类似的东西。

谢谢

I would like to know if it's possible to host webfonts on another domain,
My CSS are hosted on Amazon CloudFront and my webfonts too but they don't show up, It was fine when my css were in local.

this is my style.css on CloudFront:

@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;
}

The stylesheet is hosted on CloudFront using a subdomain: static.mydomain.com/style.css
And the Webfont can be downloaded from : static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf

Unfortunately when the stylesheet is called from mydomain.com it doesn't load it. I was wondering if it's a limitation or something like that.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

阳光下的泡沫是彩色的 2024-10-25 04:30:37

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

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

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

——而不是——

“/app/files/fonts/allerdisplay- webfont.ttf"(相对)

理论上,根据您的子域的体系结构,您可能能够设置一种方法来维护相对 URL,但这不值得麻烦。只需使用绝对值即可完成。

[以下先前的建议是在发布相关代码之前发布的]
但是 Google 网页字体 通过将整个样式表移至云。如果您无法让它在样式表中运行,您可以尝试创建一个单独的样式表。

但请注意,为了获得真正的跨浏览器兼容性,您需要一堆不同的字体文件格式......这可能是问题所在。 FontSquirrel 有一个字体套件生成器,您可能需要检查一下。

Should be no problem with an absolute path for the URL in the style declaration.

In your code above, you have relative path URLs.
You need an absolute path URL, like:

"http://static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf" (absolute)

-- not --

"/app/files/fonts/allerdisplay-webfont.ttf" (relative)

Theoretically, depending on the architecture of your subdomain, you might be able to rig up a way to maintain a relative URL, but this would not be worth the trouble. Just use an absolute one and be done with it.

[previous suggestions below were posted before the relevant code was posted]
But Google Web Fonts achieves all this by moving the entire style sheet to the cloud. If you can't get it running inside the style sheet, you might try creating a separate style sheet like that instead.

Note, however, that to get true cross-browser compatibility, you need a bunch of different font file formats... this could be the problem. FontSquirrel has a font kit generator you may want to check out for that.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文