Rails 3,@ font-face用firefox制作失败 [英] Rails 3, @font-face failing in production with firefox
问题描述
我在rails 3应用程序中使用,如果有人能确认这不仅仅发生在我的机器上(帮我排除本地主机缓存问题) 。
以下是我所做的:
$ b
将以下内容添加到font-awesome.css.scss的顶部:**
// font-awesome.css.scss
@ font-face {
font-family:'FontAwesome';
src:font-url(fontawesome-webfont.eot);
src:font-url(fontawesome-webfont.eot?#iefix)format(eot),
font-url(fontawesome-webfont.woff)format(woff) ,格式(truetype),
font-url(fontawesome-webfont.svg#FontAwesome)格式(svg);
字体url(fontawesome-webfont.ttf
font-weight:normal;
font-style:normal;
}
然后我把这个放在application.rb中:
#application.rb
config.assets.paths<< Rails.root.join(app,assets,fonts)
config.assets.precompile + =%w(.svg .eot .woff .ttf)
$ c $最后,我将所有4个字体文件放在 app / assets / fonts
中。
我真的很想知道我在这里做错了什么。
解决方案我解决了我的问题。
Firefox会拒绝所有的跨站点字体请求,除非某些特定的标题是设置:
[ie Access-Control-Allow-Origin]
而且,从本文:
不幸的是,现在S3不允许你指定你的对象获得服务的访问控制允许源头
所以你有几个选项:
我已经去了第一个选择,因为这将是一个低流量的网站,但这是一个很好的写作如何为字体提供字体m Rackspace ,同时提供来自S3的所有其他资产。
更新:
亚马逊),他们现在支持跨域资源共享(CORS),所以上面的解决方案应该不再需要了。他们的开发人员指南解释更多。
I'm using font-awesome in a rails 3 app, and everything is ok in development mode, but when I push to Heroku, Firefox fails to render the icons, and instead, I see this:
- Chrome renders the icons fine in development and production
- This just affects FireFox (although I've not tried IE)
- The app is here, I'd appreciate if someone could confirm that this is not just happening on my machine (to help me rule out a localhost caching issue).
- All assets, including fonts and stylesheets, are hosted on S3, using the asset_sync gem.
Here's what I've done:
Added the following to the top of font-awesome.css.scss:**
// font-awesome.css.scss
@font-face {
font-family: 'FontAwesome';
src: font-url("fontawesome-webfont.eot");
src: font-url("fontawesome-webfont.eot?#iefix") format("eot"),
font-url("fontawesome-webfont.woff") format("woff"),
font-url("fontawesome-webfont.ttf") format("truetype"),
font-url("fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: normal;
font-style: normal;
}
Then I put this in application.rb:
# application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
Finaly I placed all 4 font files in app/assets/fonts
.
I would really like to know what I'm doing wrong here.
解决方案 I fixed my problem.
From this article, I learned that:
Firefox rejects all cross-site font requests unless some specific headers are set:
[i.e. Access-Control-Allow-Origin]
And, from this article:
Sadly, right now S3 doesn’t allow you to specify the Access-Control-Allow-Origin header that your objects get served with
So you have a few options:
- Serve the fonts from your app's public folder, not from S3
- Serve the fonts from Rackspace, where you can set the headers
- Embed the font in your as a Base64 string
I've gone with the first option since this is gonna be a low traffic site, but here's a nice write-up on how to serve fonts from Rackspace whilst simultaneously serving all other assets from S3.
UPDATE:
Amazon announced yesterday that they now support Cross Origin Resource Sharing (CORS), so the solution posted above should no longer be necessary. Their developer guide explains more.
这篇关于Rails 3,@ font-face用firefox制作失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!