6

私の Rails 4 プロジェクトでは、css はフォント ファイルを使用します。そのため、追加でプリコンパイルする必要があります。

config/environments/production.rb に次の行を追加することでそれを達成します

  # Add the fonts path
  config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts','fonts')
  #
  # # Precompile additional assets
  config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )

本番環境で rake assets:precompile を実行します。

ただし、結果は次のとおりです。

I, [2013-10-10T19:27:51.931963 #16052]  INFO -- : Writing /var/lib/openshift/521e19c85004460a8e000107/app-root/runtime/repo/public/assets/fonts/glyphicons-halflings-regular-ab2f6984951c07fd89e6afdefabd93c7.eot
I, [2013-10-10T19:27:51.940615 #16052]  INFO -- : Writing /var/lib/openshift/521e19c85004460a8e000107/app-root/runtime/repo/public/assets/fonts/glyphicons-halflings-regular-24dfb40c91db789b8b8faba6886ac1ef.svg
I, [2013-10-10T19:27:51.950685 #16052]  INFO -- : Writing /var/lib/openshift/521e19c85004460a8e000107/app-root/runtime/repo/public/assets/fonts/glyphicons-halflings-regular-4b2130768da98222338d1519f9179528.ttf
I, [2013-10-10T19:27:51.983230 #16052]  INFO -- : Writing /var/lib/openshift/521e19c85004460a8e000107/app-root/runtime/repo/public/assets/fonts/glyphicons-halflings-regular-7a07f26f72466361ac9671de2d33fd1c.woff

css ファイルは、この md5 フィンガープリントのないフォント ファイルを参照します。

md5 フィンガープリントなしでアセットが生成されるようにアセットをプリコンパイルするにはどうすればよいですか? または、そのような場合はそれらを public/fonts/ フォルダーに配置する必要がありますか?

4

1 に答える 1

2

次の手順を実行します

  • あなたのフォントはapp/assets/fonts
  • フォントをアセットパスに追加します（あなたがしたように）が、好むconfig/application.rb
  • à を使用して、CSS でフォ​​ントを宣言します@font-face。ここでいくつかのヘルプを見つけることができます
  • SCSS を使用しない場合は、css likeapplication.css.erbを埋め込み、ヘルパーを使用asset_path()して font-face 宣言にフォント パスを実装する必要があります。

SCSS を使用しない例:

@font-face {
  font-family: 'MyFont';
  src:url('<%= asset_path("myfont.eot")%>');
  src:url('<%= asset_path("myfont.eot?#iefix")%>') format('embedded-opentype'),
    url('<%= asset_path("myfont.svg#myfont")%>') format('svg'),
    url('<%= asset_path("myfont.woff")%>') format('woff'),
    url('<%= asset_path("myfont.ttf")%>') format('truetype');
  font-weight: normal;
  font-style: normal;
}
于 2013-11-17T10:49:55.873 に答える