☰

Railsアセットパイプラインでフォントを使用する 質問する

tag-icon • tag-icon ruby-on-rails sass asset-pipeline font-face assets
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/に保存されます。

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

コンパイルされた 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 に 127.0.0.1 の GET "/assets/icoMoon.ttf" を開始しました。アセット /icoMoon.ttf が提供されました - 404 見つかりません (13 ミリ秒)

アセット パイプラインはなぜフォント ファイルを /assets だけにフラット化しないのでしょうか?

何かアイデアはありますか？

よろしくお願いいたします、ニール

追加情報:

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

ベストアンサー1

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

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

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

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

    font-family: 'Icomoon';

おすすめ記事