Rails 3，@font-face 在使用 Firefox 的生产中失败 [英] Rails 3, @font-face failing in production with firefox

问题描述

我在 rails 3 应用程序中使用 ，如果有人能确认这不是，我将不胜感激刚刚发生在我的机器上(帮助我排除本地主机缓存问题).

所有资产(包括字体和样式表)都使用 asset_sync gem 托管在 S3 上.

这是我所做的:

在 font-awesome.css.scss 顶部添加以下内容:**

//font-awesome.css.scss@字体脸{字体系列:'FontAwesome';src: font-url("fontawesome-webfont.eot");src: font-url("fontawesome-webfont.eot?#iefix") 格式("eot"),font-url("fontawesome-webfont.woff") 格式("woff"),font-url("fontawesome-webfont.ttf") 格式("truetype"),font-url("fontawesome-webfont.svg#FontAwesome") 格式("svg");字体粗细:正常；字体样式:正常；}

然后我把它放在 application.rb 中:

# application.rbconfig.assets.paths <<Rails.root.join("app", "assets", "fonts")config.assets.precompile += %w( .svg .eot .woff .ttf )

最后，我将所有 4 个字体文件放在 app/assets/fonts 中.

我真的很想知道我在这里做错了什么.

解决方案

我解决了我的问题.

来自这篇文章，我了解到:

<块引用>

Firefox 拒绝所有跨站点字体请求，除非设置了某些特定标题:

[即访问控制允许来源]

而且，来自这篇文章:

<块引用>

遗憾的是，现在 S3 不允许您指定为您的对象提供服务的 Access-Control-Allow-Origin 标头

所以你有几个选择:

1. 从您应用的公共文件夹提供字体，而不是从 S3 提供
2. 从 Rackspace 提供字体，您可以在其中设置标题
3. 将字体作为 Base64 字符串

我选择了第一个选项，因为这将是一个低流量的网站，但这里有一篇关于如何提供来自 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:

1. Serve the fonts from your app's public folder, not from S3
2. Serve the fonts from Rackspace, where you can set the headers
3. 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屋！