web-dev-qa-db-ja.com

Railsアシストパイプラインでのフォトの使用

私はScssファイルで次のようにいくつかのフォントを設定しています。

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

実際のフォントファイルは/ app/assets/fonts /に格納されています。

私のapplication.rbファイルにconfig.assets.paths << Rails.root.join("app", "assets", "fonts")を追加しました

そしてコンパイルCSSソースは以下の通りです：

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

しかし、私がアプリを実行したときにはフォントファイルは見つかりませんでした。ログ：

2012-06-05 23:21:17 +0100にアセット/icoMoon.ttf - 404が見つかりません（13ms）

アセットパイプラインがフォントファイルを/アセットだけにフラット化しないのはなぜですか？

どんな人？

親切、ニール

追加情報：

Railsコンソールでアセットパスとassetprecompileをチェックすると、次のようになります。

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !Ruby/object:Proc {}
- !Ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/Ruby-1.9.2-p320@neiltonge/gems/jquery-Rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/Ruby-1.9.2-p320@neiltonge/gems/coffee-Rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/Ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !Ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil
ruby-on-railssassasset-pipelinefont-faceassets
326
rctneil

  1. Railsのバージョンが> 3.1.0と< 4の間の場合は、フォントを次のいずれかのフォルダに配置してください。

    • app/assets/fonts
    • lib/assets/fonts
    • vendor/assets/fonts


    Railsバージョンの> 4では、あなたはあなたのフォントをapp/assets/fontsフォルダに置かなければなりません。

    注：これらの指定フォルダーの外側にフォントを配置するには、以下の構成を使用してください。

    config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

    Railsのバージョン> 4.2では、この設定をconfig/initializers/assets.rbに追加することをお勧めします。

    ただし、それをconfig/application.rbまたはconfig/production.rbに追加することもできます。

  2. CSSファイルでフォントを宣言します。

    @font-face {
  font-family: 'Icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
    url('icomoon.svg#icomoon') format('svg'),
    url('icomoon.woff') format('woff'),
    url('icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

    あなたのフォントが宣言のURL部分と全く同じ名前であることを確認してください。大文字と句読点が重要です。この場合、フォントの名前はicomoonになります。

  3. SailsまたはLessをRailsの> 3.1.0（CSSファイルの拡張子が.scssまたは.lessである）で使用している場合は、フォント宣言のurl(...)をfont-url(...)に変更します。

    それ以外の場合、CSSファイルの拡張子は.css.erb、フォント宣言はurl('<%= asset_path(...) %>')になります。

    Railsの> 3.2.1を使用している場合は、font_path(...)の代わりにasset_path(...)を使用できます。このヘルパーはまったく同じことをしますが、より明確です。

  4. 最後に、font-family部分で宣言したのと同じように、フォントをCSSで使用します。大文字で宣言されている場合は、次のように使用できます。

    font-family: 'Icomoon';
636
Ashitaka

さて、ここにひねりがあります：

すべてのフォントをapp/assets/fonts/に配置する必要がありますWILLデフォルトでステージングおよびプロダクションでプリコンパイルされます。heroku。

vendor/assetsに配置されたフォントファイルはNOT既定でステージングまたはプロダクションでプリコンパイルされます—それらは失敗しますheroku。 ソース！

— @ plapier、thoughtbot/bourbon

ベンダーのフォントをvendor/assets/fontsに入れることは、app/assets/fontsに入れるよりもずっと意味があると強く信じています。これらの2行の追加構成で、これは私にとってはうまく機能しました（Rails 4）：

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— @ jhilden、thoughtbot/bourbon

Rails 4.0.0でもテストしました。実際、最後の1行でvendorフォルダーからフォントを安全にプリコンパイルできます。それを理解するために数時間かかった。それが誰かを助けることを願っています。

37
jibiel

フォントの移動を追跡したくない場合は、

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}
23
Nathan Colgate

urlではなく、@ font-faceブロックでfont-urlを使用する必要があります。

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

application.rbのこの行と同様に、（app/assets/fonts内のフォントの場合）

config.assets.paths << Rails.root.join("app", "assets", "fonts")
18
craic.com

これがアセットパイプラインでフォントを使用するための私のアプローチです。

1）すべてのフォントファイルをapp/assets/fonts/の下に置きます。実際、あなたはそれをfontsフォルダ名の下に置くように制限されていません。好きなサブフォルダー名を付けることができます。例えば。 app/assets/abcまたはapp/assets/anotherfonts。しかし、フォルダー構造を良くするためにapp/assets/fonts/の下に置くことを強くお勧めします。

2）sassファイルから、sassヘルパーfont-pathを使ってこのようなフォントアセットをリクエストします

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3）ローカルマシンからbundle exec rake assets:precompileを実行して、application.cssの結果を確認します。このようなものが見えるはずです。

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

アセットパイプラインの仕組みについてもっと知りたい場合は、次の簡単なガイドをご覧ください。 https://designcode.commandrun.com/Rails-asset-pipeline-simple-guide-830e2e666f6c# .6lejlayk2

9
Tim

私はRails 4.2（Ruby 2.2.3を含む）でこの問題を抱えていたので、font-awesome _paths.scssパーシャルを編集して$fa-font-pathへの参照を削除し、先頭のスラッシュを削除する必要がありました。以下は壊れていました：

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

そして、次のように動作します。

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

別の方法としては、補間された$fa-font-pathに続くスラッシュを単純に削除してから、（必要に応じて）空の文字列または末尾のスラッシュを含むサブディレクトリとして$fa-font-pathを定義します。

資産を再コンパイルし、必要に応じてサーバーを再起動してください。たとえば、乗客の設定では、

Prompt> rake assets:clean; rake assets:clobber
Prompt> Rails_ENV=production Rails_GROUPS=assets rake assets:precompile
Prompt> service passenger restart

次にブラウザをリロードします。

5
markeissler

Rails 4.2を使用していますが、フッターアイコンが表示されませんでした。折りたたまれた行に（+）が表示され、小さな並べ替え矢印が表示されるのではなく、小さなボックスが表示されました。ここで情報を調べた後、私は私のコードに1つの簡単な変更を加えました：cssのフォントディレクトリを削除します。つまり、すべてのCSSエントリを次のように変更します。

src:url('fonts/footable.eot');

このようになります。

src:url('footable.eot');

出来た。 Rails 4.2はすでにフォントディレクトリを想定しているので、CSSコードで再度指定するとフォントファイルが見つかりません。お役に立てれば。

5
Brian Doherty

これが、Herokuで動作するRails 5.2でカスタムフォントを提供するデモです。それはさらに進んで、 https://www.webpagetest.org/ に従ってできるだけ速くなるようにフォントの提供を最適化します。

https://github.com/nzoschke/edgecors

始めるために、私は上記の答えから部分を選びました。 Rails 5.2以降では、追加のアセットパイプライン設定は必要ありません。

資産パイプラインとSCSS

  • フォントをapp/assets/fontsに配置する
  • @font-face宣言をscssファイルに置き、font-urlヘルパーを使用します

app/assets/stylesheets/welcome.scssから：

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

CORSを使用してCDNから配信

私は Heroku Edgeアドオン を追加したCloudFrontを使用しています。

まずCache-ControlにCDNプレフィックスとデフォルトのproduction.rbヘッダーを設定します。

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_Host = ENV["Edge_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

Herokuapp.comのURLからCDNのURLにフォントをアクセスしようとすると、ブラウザにCORSエラーが表示されます。

Originから ' https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf 'にフォントへアクセスする https://edgecors.herokuapp.com 'がCORSポリシーによってブロックされています：要求されたリソースに' Access-Control-Allow-Origin 'ヘッダーがありません。 edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

そのため、HerokuからCDN URLへのフォントへのアクセスを許可するようにCORSを設定します。

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Gzipフォント資産の提供

アセットパイプラインは.ttf.gzファイルを作成しますが、それを提供しません。このモンキーパッチは、アセットパイプラインのgzipホワイトリストをブラックリストに変更します。

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

最終的な結果は、長期間有効なCloudFrontキャッシュから提供されるapp/assets/fonts内のカスタムフォントファイルです。

2
Noah Zoschke

最近Rails 3アプリをRails 4にアップグレードしたときにも、同様の問題がありました。私のフォントはRails 4以降のように正しく動作していませんでした。フォントをapp/assets/fontsディレクトリの下に置くことのみ許可されています。しかし、私のRails 3アプリは異なるフォント構成を持っていました。だから私はそれがまだapp/assets/fonts以外の別の場所に私のフォントを持っているRails 4+で動作するようにアプリを設定しなければなりませんでした。私はいくつかの解決策を試してみましたが、 non-stupid-digest-assets のgemを見つけた後は、とても簡単になりました。

Gemfileに次の行を追加して、このgemを追加してください。

gem 'non-stupid-digest-assets'

次に実行します。

bundle install

最後に、config/initializers/non_digest_assets.rbファイルに次の行を追加します。

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

それでおしまい。これは私の問題をうまく解決した。私のような同様の問題に遭遇したことがある人に役立つことを願っています。

2
K M Rakibul Islam

私の場合、最初の質問はプレーンなurl cssプロパティの代わりにasset-urlを結果なしで使用することでした。 asset-urlを使うことはHerokuで私のために働きました。さらに、サブフォルダやその他の設定を追加せずに/assets/fontsフォルダにフォントを設定してasset-url('font.eot')を呼び出すこともできます。

2
bartoindahouse

Scaffolds.css.scssというファイルがある場合は、他のファイルで行っているすべてのカスタム設定を上書きする可能性があります。私はそのファイルをコメントアウトし、突然すべてがうまくいった。そのファイルに重要なものがない場合は、単に削除することもできます。

1
katfa