Rails 3中，@字体面在生产中没有与Firefox(Rails 3, @font-face fa

我使用的字体真棒在Rails 3应用程序，一切都在发展模式确定，但是当我推到Heroku上，火狐无法呈现的图标，而是，我看到这一点：

Chrome浏览器呈现在开发和生产精细的图标
这只是影响到火狐（虽然我还没有尝试IE）
该应用程序是在这里，我会很感激，如果有人可以证实这不仅仅发生在我的机器上（帮我排除本地主机缓存的问题）。
所有资产，包括字体和样式，托管在S3，使用asset_sync宝石。

下面是我做了什么：

增加了以下对字体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;
}

然后我把这个在application.rb中：

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

Finaly我摆在所有4字体文件app/assets/fonts 。

我真的想知道我在做什么错在这里。

Answer 1:

这是我加入到我的AWS管理控制台来配置此横穿东西桶配置：

登录到AWS - > AWS管理控制台 - > S3 - >查找你的水桶 - >按属性按钮（放大镜纸上玻璃出于某种原因） - 右边>社区法网权限 - >“编辑CORS配置”

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

2小时研究后... :-(

Answer 2:

我固定我的问题。

从这篇文章中，我了解到：

火狐拒绝所有跨站点字体请求，除非一些特定的标头设置：
[即访问控制允许来源]

而且，从这篇文章：

可悲的是，现在S3不允许你指定的访问控制允许来源标题，你的对象将会被送达

所以，你有几种选择：

从您的应用程序的公用文件夹从S3服务的字体，而不是
为来自Rackspace公司，在那里你可以设置标题的字体
嵌入字体在你为Base64编码字符串

我已经在第一次选择了，因为这是会是一个低流量的网站，但这里有一个如何一个不错的写了从Rackspace公司服务的字体，而同时从S3服务的所有其他资产。

更新：

亚马逊昨日宣布，他们现在支持跨源资源共享（CORS），使上面贴的解决方案应该不再是必要的。他们的开发人员指南详细解释。

Answer 3:

亚马逊S3现在支持CORS，你不再被强制嵌入字体BASE64在你的CSS（它会为你节省一些带宽:)

http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/

Answer 4:

你也可以使用一些机架中间件直接与所需的访问控制标头CloudFront的服务字体。

# config/environment/production.rb

  # Rack Headers
  # Set HTTP Headers on static assets

  config.assets.header_rules = {
    :global => {'Cache-Control' => 'public, max-age=31536000'},
    :fonts  => {'Access-Control-Allow-Origin' => '*'}
  }
  require 'rack_headers'
  config.middleware.insert_before '::ActionDispatch::Static', '::Rack::Headers'

-----

# lib/rack_headers.rb

require 'rack/utils'

module Rack
  class Headers

    def initialize(app, options={})
      @app = app

      default_path = Rails.application.config.assets.prefix || '/assets'
      @asset_path = options.fetch(:path, default_path)

      default_rules = Rails.application.config.assets.header_rules || {}
      @rules = options.fetch(:header_rules, default_rules)
    end

    def call(env)
      dup._call(env)
    end

    def _call(env)
      status, @headers, response = @app.call(env)
      @path = ::Rack::Utils.unescape(env['PATH_INFO'])

      if @path.start_with?(@asset_path)
        set_headers
      end

      [status, @headers, response]
    end

    def set_headers
      @rules.each do |rule, headers|
        case rule
        when :global # Global
          set_header(headers)
        when :fonts  # Fonts Shortcut
          set_header(headers) if @path.match %r{\.(?:ttf|otf|eot|woff|svg)\z}
        when Array   # Extension/Extensions
          extensions = rule.join('|')
          set_header(result) if @path.match %r{\.(#{extensions})\z}
        when String  # Folder
          set_header(result) if
            (@path.start_with? rule || @path.start_with?('/' + rule))
        when Regexp  # Flexible Regexp
          set_header(result) if @path.match rule
        else
        end
      end
    end

    def set_header(headers)
      headers.each { |field, content| @headers[field] = content }
    end
  end
end

-----

该解决方案使用规则，基于规则的每个文件设置不同的页眉。这些规则说明如下： https://github.com/thomasklemm/butler#providing-rules-for-setting-http-headers 。基本上，你可以用正则表达式什么，但也有文件结尾，文件夹，网页字体和全球头的快捷方式。