Rails 3，@ font-face用firefox制作失败 [英] Rails 3, @font-face failing in production with firefox

问题描述

我在rails 3应用程序中使用，如果有人能确认这不仅仅发生在我的机器上（帮我排除本地主机缓存问题） 。

使用在S3上托管所有资产，包括字体和样式表asset_sync 宝石。

以下是我所做的：
$ 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）
  app / assets / fonts 中。 
 
 
 
我真的很想知道我在这里做错了什么。 
 
解决方案
我解决了我的问题。  
 
 
 From  
 
 
 
 
 Firefox会拒绝所有的跨站点字体请求，除非某些特定的标题是设置： 
 
 
 [ie Access-Control-Allow-Origin] 
 
 
而且，从本文： 
 
 
 
 
不幸的是，现在S3不允许你指定你的对象获得服务的访问控制允许源头
 
 
所以你有几个选项：
 
 
 
 
从您的应用程序的公用文件夹（而不是从S3）发送字体
 
来自Rackspace的字体，可以设置标题
 
 
将字体嵌入到 Base64字符串 
 
 
 
 
我已经去了第一个选择，因为这将是一个低流量的网站，但这是一个很好的写作如何为字体提供字体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屋！