Rails 3，@ font-face使用firefox生成失败
我在rails 3应用程序中使用font-awesome ，在开发模式下一切正常，但是当我推送到Heroku时，Firefox无法呈现图标，相反，我看到了：
- Chrome在开发和制作中使图标很好
- 这只会影响FireFox（虽然我没试过IE）
- 该应用程序在这里 ，如果有人能够确认这不仅仅发生在我的机器上（以帮助我排除本地主机缓存问题），我将不胜感激。
- 所有资产（包括字体和样式表）都使用asset_sync gem托管在S3上。
这就是我所做的：
将以下内容添加到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; } 然后我把它放在application.rb中：
# application.rb config.assets.paths << Rails.root.join("app", "assets", "fonts") config.assets.precompile += %w( .svg .eot .woff .ttf )
最后我将所有4个字体文件放在app/assets/fonts 。
我真的很想知道我在这里做错了什么。
这是我在AWS管理控制台中添加到我的存储桶中的配置，用于配置此交叉事物：
登录AWS – > AWS管理控制台 – > S3 – >查找存储桶 – >推送属性按钮（出于某种原因在纸上放大镜） – >右侧的Clic PERMISSIONS – >“编辑CORS配置”
* GET 3000 Content-* Host
经过两个小时的研究…… 🙁
我解决了我的问题。
从这篇文章中 ，我了解到：
Firefox拒绝所有跨站点字体请求，除非设置了一些特定的标头：
[即Access-Control-Allow-Origin]
并且，从这篇文章 ：
遗憾的是，现在S3不允许您指定对象获取的Access-Control-Allow-Origin标头
所以你有几个选择：
- 从应用程序的公用文件夹而不是S3中提供字体
- 从Rackspace提供字体，您可以在其中设置标题
- 将字体嵌入您的Base64字符串中
我已经选择了第一个选项，因为这将是一个低流量网站，但这里有一个关于如何从Rackspace提供字体同时为S3中的所有其他资产提供服务的好文章。
更新：
亚马逊昨天宣布他们现在支持跨域资源共享（CORS），因此不再需要上面发布的解决方案。 他们的开发者指南解释更多
Amazon S3现在支持CORS，你不再被迫在你的css中嵌入BASE64字体（它会为你节省一些带宽:)
您还可以使用某些机架中间件直接使用所需的访问控制标头来提供字体到云端。
# 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 。 基本上你可以用Regexp做任何事情，但有文件结尾，文件夹，网页字体和全局标题的快捷方式。
您可以使用以下站点来Base64编码字体。 尝试使用FontSquirel，但它不允许您加密版权/购买的字体。
只需在s3中添加整个存储桶的标题即可。
http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html
这个post有一个更新。 似乎无法通过将cors.xml文件上传到存储桶来设置CORS。 现在你必须点击它;）。 这个线程在寻找解决方案时节省了一些时间，但另一方面我丢失了一些上传和更改cors.xml文件的时间。
当前的解决方案是单击存储桶的属性> Permissons>，然后单击添加CORS配置