将字体添加到资产管道导轨 4.2.x答案

【问题标题】：Adding fonts to assets pipeline rails 4.2.x将字体添加到资产管道导轨 4.2.x
【发布时间】：2015-12-27 02:31:56
【问题描述】：

我正在尝试在 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 有上面提到的这些字体。然后我有资产初始化器：

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

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

【问题讨论】：

您可以尝试使用asset-url 代替url 吗？这对我们有用。
@EgonWilzer 你能不能回答一下，太棒了！

标签： css ruby-on-rails heroku fonts

【解决方案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
}

【讨论】：

【解决方案2】：

如果您的资产是预编译的，您应该使用 Rails 的 asset_path 助手。将您的 scss 文件更改为 scss.erb 并将您的 @font-face 块修改为如下内容：

@font-face {
  font-family: 'FontAwesome';
  src: url(<%= asset_path 'fontawesome-webfont.eot?v=4.4.0' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot?#iefix&v=4.4.0' %>) format('embedded-opentype'),
  /* etc... */
}

【讨论】：