23

Rails 3アプリでfont-awesomeを使用しており、開発モードではすべて問題ありませんが、Herokuにプッシュすると、Firefoxはアイコンのレンダリングに失敗し、代わりに次のように表示されます。

ここに画像の説明を入力してください

  • Chromeは、開発と本番環境でアイコンを適切にレンダリングします
  • これはFireFoxに影響します（IEは試していませんが）
  • アプリはここにあります。誰かがこれが私のマシンで起こっているだけではないことを確認できれば幸いです（ローカルホストのキャッシュの問題を除外するのに役立ちます）。
  • フォントやスタイルシートを含むすべてのアセットは、asset_syncgemを使用して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。

ここで何が間違っているのか本当に知りたいです。

4

7 に答える 7

25

これは、このクロスシングを設定するためにAWS管理コンソールのバケットに追加した設定です。

AWSにログイン->AWSマネジメントコンソール->S3->バケットを検索->プロパティボタンを押します（何らかの理由で紙の虫眼鏡）->右側のクリックパーミッション->[CORS設定の編集]

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

2時間の調査の後...:-(

于 2013-05-13T20:46:40.013 に答える
13

問題を修正しました。

この記事から、私はそれを学びました：

Firefoxは、特定のヘッダーが設定されていない限り、すべてのクロスサイトフォント要求を拒否します。

[つまり、Access-Control-Allow-Origin]

そして、この記事から：

残念ながら、現在S3では、オブジェクトが提供されるAccess-Control-Allow-Originヘッダーを指定できません。

したがって、いくつかのオプションがあります。

  1. S3からではなく、アプリのパブリックフォルダーからフォントを提供します
  2. ヘッダーを設定できるRackspaceからフォントを提供します
  3. フォントをBase64文字列として埋め込みます

これはトラフィックの少ないサイトになるため、最初のオプションを選択しましたが、S3から他のすべてのアセットを同時に提供しながら、Rackspaceからフォントを提供する方法についての素晴らしい記事があります。

アップデート：

Amazonは昨日、クロスオリジンリソースシェアリング（CORS）をサポートするようになったため、上記のソリューションは不要になると発表しました。彼らの開発者ガイドはもっと説明しています。

于 2012-06-29T23:33:27.200 に答える
6

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/

于 2012-09-02T16:08:44.333 に答える
5

一部のラックミドルウェアを使用して、必要なアクセスコントロールヘッダーを使用してフォントをクラウドフロントに直接提供することもできます。

# 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#pproving-rules-for-setting-http-headersで説明されています。基本的には正規表現で何でもできますが、ファイルの末尾、フォルダー、Webフォント、グローバルヘッダーのショートカットがあります。

于 2012-09-08T05:39:12.633 に答える
1

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

http://base64fonts.com/convert.php

于 2012-07-13T12:35:43.073 に答える
1

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

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

于 2013-01-14T22:38:20.823 に答える
0

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

現在の解決策は、バケットのプロパティ>許可>をクリックしてから、[CORS構成の追加]をクリックすることです。

于 2014-06-06T15:24:06.330 に答える