web-dev-qa-db-ja.com

Rails 4：フォントが本番環境で読み込まれないのはなぜですか？

本番環境ではRails 4アプリ）にフォントを読み込めません。開発中は正常に機能します。

アセットは、デプロイ中にサーバー上でプリコンパイルされます。

私は自分のフォントを持っています

app/assets/fonts

私のapp.css：

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

私のproduction.rbには次のものがあります。

config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}
ruby-on-railsfontsruby-on-rails-4capistranofont-face
19
raphael_turtle

先週この問題が発生しました。問題は、アセットがコンパイルされてMD5ハッシュが含まれる一方で、標準のCSSが引き続き「標準」の名前を検索することです。これは画像とフォントの問題です。

@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

これは、アセットを動的にロードするために scss ファイルを使用する方法の例です。これらのファイルは（プッシュ前または初期化中に）.cssファイルにコンパイルされ、すべてアセットが正しく同期されます。

Herokuでも同様の問題が発生し、ファイルを/stylesheets/layout/fonts.css.scssに配置してから、Herokuを呼び出すことで問題を解決できました。

@import '/layout/fonts';

@import関数をサポートするために、application.css-> application.css.scssも呼び出しました。

20
Richard Peck

これは、ライブラリのこの問題をトラブルシューティングする一般的な方法です。

ローカルでエラーを再現

  1. 実行Rails本番サーバー

    1. ターミナル上_rake assets:precompile_

    2. これは_config/environments/production.rb_にあります

      _  # Rails 4 production
  # config.serve_static_files = true
  # Rails 5, Uncomment to run production on local
  # config.log_level = :debug
  config.public_file_server.enabled = true
_
    3. ターミナル上_Rails_ENV=production Rails s_
  2. Webブラウザにエラーが表示されるはずです

フォントファミリーを上書きする

  1. _application.css_が使用されるため、_application.scss_の名前を_asset-url_に変更する必要があります

  2. ファイル_config/initializers/assets.rb_でプリコンパイルするフォントを追加します。

    _Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
_

  3. CSSライブラリ内でフォントフェース定義を探し、それを_application.scss_にコピーします。次のようになります。

    _@font-face {
  font-family: 'my-library';
  src: url('../fonts/my-library.eot');
  src:
    url('../fonts/my-library.eot?#iefix') format('embedded-opentype'),
    url('../fonts/my-library.woff2') format('woff2'),
    url('../fonts/my-library.ttf') format('truetype'),
    url('../fonts/my-library.woff') format('woff'),
    url('../fonts/my-library.svg?#my-library') format('svg');
  font-weight: normal;
  font-style: normal;
}
_

  4. への変更：

    _@font-face {
  font-family: 'my-library';
  src: asset-url('my-library/fonts/my-library.eot');
  src:
    asset-url('my-library/fonts/my-library.eot?#iefix') format('embedded-opentype'),
    asset-url('my-library/fonts/my-library.woff2') format('woff2'),
    asset-url('my-library/fonts/my-library.ttf') format('truetype'),
    asset-url('my-library/fonts/my-library.woff') format('woff'),
    asset-url('my-library/fonts/my-library.svg?#my-library') format('svg');
  font-weight: normal;
  font-style: normal;
}
_

どのような変更が行われましたか

  1. urlの代わりに_asset-url_を使用してください
  2. _../fonts_または_asset-url_が理解できるパスに類似したものを変更します。

アセットに配置するパス-url

_asset-url_が理解できるパスを知るには、Rails consoleに移動し、_Rails.application.assets.paths_と入力します。次のようになります。

_[
  '/path/1',
  '/path/2',
  '/path/3',
]
_

フォントが_/path/2/my-library/fonts/_にある場合は、asset-url('my-library/fonts/my-library.eot')を使用します。

つまり、_Rails.application.assets.paths_で見つけたその部分のパスを削除します。

正しいパスを書いたことを確認してください

オンRails開発中のコンソール：

_helper.asset_url('my-library/fonts/my-library.eot')
_

戻る必要があります：

_"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot"
_

末尾の_/assets/_と最後の部分のダイジェストに注意してください。

6
juanpastas

Railsには、このためのビルド前ヘルパーが付属しています。 url（）を使用する代わりにasset-url（）を使用する必要があります。

0
Abhiyan Timilsina

1：-すべてのフォントをapp/assets/fontsフォルダーに保存します。

2：-rake Asset：precompile Rails_ENV = productionの後、すべてのフォントはダイジェストを使用してpublic/assetsフォルダーにプリコンパイルされます。

3：-src：url（ 'fontname.eot'）を使用する代わりに、scssファイルでsrc：font_url（ 'fontname.eot'）を使用します。

0
Nikhil Mohadikar