托管在另一个域上的 Web 字体
我想知道是否可以在另一个域上托管网络字体, 我的 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
样式声明中 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.