353

次のように、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 見つかりません (13ms)

アセット パイプラインがフォント ファイルを /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
4

12 に答える 12

660

  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';
于 2012-06-06T01:54:55.120 に答える
38

ここにひねりがあります：

デフォルトでステージングと本番環境でプリコンパイルされるため、すべてのフォントを配置する必要があります。herokuapp/assets/fonts/にプッシュするとプリコンパイルされます。

に配置されたフォント ファイルは、デフォルトではステージングまたは本番環境でプリコンパイルされません — それらはvendor/assetsherokuで失敗します。ソース！

— @plapier、思考ボット/バーボン

ベンダー フォントを に配置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、思考ボット/バーボン

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

于 2014-05-12T14:34:00.573 に答える
9

アセット パイプラインでフォントを使用するための私のアプローチは次のとおりです。

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;
}

アセット パイプラインの仕組みについて詳しく知りたい場合は、次の簡単なガイドに アクセスしてください。

于 2015-11-24T11:44:29.283 に答える
5

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

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

于 2015-12-15T21:48:14.760 に答える
5

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

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

次のようになります。

src:url('footable.eot');

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

于 2015-03-23T16:31:03.113 に答える
3

最近、Rails 3 アプリを Rails 4 にアップグレードしたときに、同様の問題が発生しました。app/assets/fontsRails 4+ のようにフォントが正しく動作しませんでした。フォントをディレクトリの下に保持することしか許可されていません。しかし、Rails 3 アプリのフォント構成は異なっていました。そのため、Rails 4+ 以外の別の場所にフォントがある場合でも機能するように、アプリを構成する必要がありましたapp/assets/fonts。私はいくつかの解決策を試しましたが、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)$/ ]

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

于 2014-07-24T16:27:53.467 に答える
2

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

于 2016-04-27T15:56:10.060 に答える