Rails 3、@ font-faceがファイアウォールで生産されていません

Question

レール3アプリでfont-awesomeを使用していますが、すべてが開発モードでOKですが、私がHerokuにプッシュすると、

• クロームだけでFireFoxの（私はIEを試していませんでしたが）
• アプリはhereで、私に影響を与え、開発中に微細なアイコンや生産
• これをレンダリング：、私はこれを参照してください感謝する誰かがこれが私のマシン上で起こっているだけではないことを確認できれば（ローカルホストのキャッシュ問題を除外するために）。
• フォントとスタイルシートを含むすべてのアセットは、asset_sync gemを使用してS3上でホストされます。ここで

は、私がやったものだ：

はフォント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; 
} 

それから私は、アプリケーションでこれを置きます。 RB：

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

Finaly私はapp/assets/fontsにすべての4フォントファイルを置きました。

ここで間違っていることを本当に知りたいです。

Answer 1

私の問題は修正されました。 this articleから

、私が学んだこと：いくつかの特定のヘッダが設定されていない限り、Firefoxはすべてクロスサイトフォント要求を拒否

：

[すなわち、 this articleからのアクセス制御 - 許可 - 起源]

とは、：

悲しいことに、今のS3は、あなたのオブジェクトが取得するアクセス制御 - 許可 - 起源ヘッダーを指定することはできません。

添えだから、あなたは、いくつかのオプションがあります。

1. アプリのパブリックフォルダからフォントをサーブし、FませんROM S3は
2. は、あなたがこのつもりもしているので、私は最初のオプションを使用して行ってきたBase64 string

としてあなたのヘッダー

埋め込むにフォントを設定することができRackspaceの、からフォントをサーブ低トラフィックのサイトですが、serve fonts from RackspaceにS3の他のすべてのアセットを同時に配信する方法についての素晴らしい記事があります。

---

UPDATE：

アマゾンannounced yesterday彼らは今、クロスオリジンリソース共有（CORS）をサポートするので、上記の投稿ソリューションは、もはや必要ではないはずです。彼らのdeveloper guideについてもっと詳しく説明しています。

Answer 2

次のサイトをBase64にエンコードすることができます。 FontSquirelを使ってみましたが、著作権/購入したフォントを暗号化することはできません。

http://base64fonts.com/convert.php

Answer 3

Amazon S3は今CORSをサポートして、あなたはもはやあなたのCSSでBASE64フォントを埋め込むことを余儀なくんだ（それはあなたにいくつかの帯域幅を節約します:)

あなたが使用することもでき

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

Answer 4

一部のラックミドルウェアがクラウドフロントに必要なアクセス制御ヘッダーを直接フォントに提供します。

# 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。基本的にはRegexpsで何でもできますが、ファイルのエンディング、フォルダ、Webフォント、グローバルヘッダのショートカットがあります。

Answer 5

s3にバケット全体のヘッダーを追加するだけです。

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 6

これは私がこのクロス事設定するには、AWSマネジメントコンソールでの私のバケツに追加した構成である：AWSにして

ログ - > AWS Management Consoleの - > S3 - >あなたのバケツを探します - >プッシュボタンのプロパティ（何らかの理由で紙の上に拡大鏡） - > clicクリックPERMISSIONS右の - > "編集CORSの設定" 研究の2時間後

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

... :-(

Answer 7

このスレッドへの更新があります。 cors.xmlファイルをバケットにアップロードしてCORSを設定することはできないようです。今すぐクリックする必要があります;）。このスレッドは、解決策を探している間、私にしばらく時間を節約しましたが、一方で、cors.xmlファイルのアップロードと変更に時間がかかりました。

現在のソリューションは、バケットのプロパティをクリックすることです> Permissons>、その後、私は自分のアプリケーションをHerokuの上でホストされていることを除いて同じ問題に直面していますCORS設定