css - 将字体添加到 Assets 管道 rails 4.2.x

Question

我正在尝试在 heroku 上部署我的应用程序，但仍然没有加载字体，这是我的相关字体 sass:

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

我在 app/assets/fonts 中有上面提到的这些字体。然后我有 Assets 初始值设定项:

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

我该怎么做才能解决这个问题，这似乎是一个常见问题，但没有一个常见的解决方案有效，有什么建议吗？

Answer 1

你应该在 sass 中使用 asset-url 而不是 url。

查看此处了解更多信息:https://github.com/rails/sass-rails#user-content-asset-helpers

所以这应该可行:

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