如何在我的资产文件夹中引用自定义字体文件？答案

【问题标题】：How do I reference a custom font file in my asset folder?如何在我的资产文件夹中引用自定义字体文件？
【发布时间】：2018-01-27 14:32:57
【问题描述】：

在 Rails 5 中，如何引用我上传的自定义字体文件？我已经把文件放在了

app/assets/fonts/chicagoflf-webfont.woff

然后在我的 CSS 文件中，我有

@font-face {
    font-family: 'chicagoflfregular';
    src: url('fonts/chicagoflf-webfont.woff2') format('woff2'),
         url('fonts/chicagoflf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

但我没有看到字体正在加载，即使在重新启动我的服务器之后也是如此。我应该在“url”字段中使用的正确路径是什么？

【问题讨论】：

您是否完成了资产的预编译？可能这就是它不接的原因？
不，我没有。那有必要吗？你说这条路是对的吗？
查看stackoverflow.com/questions/10905905/…
另外，您可以使用 FontSquirrel 等服务为其他浏览器生成更多字体格式以获得更好的支持
你的css文件扩展名是什么？它是 css 还是 scss？

标签： css ruby-on-rails fonts ruby-on-rails-5 assets

【解决方案1】：

假设您使用的是 Sass，您可以使用 font-url 或 asset-url 来调用您的字体。考虑到您将自定义字体放在app/assets/fonts 中，您应该能够直接调用字体，路径中没有前缀，就像这样

@font-face {
  font-family: 'chicagoflfregular';
  src: font-url('chicagoflf-webfont.woff2') format('woff2'),
       font-url('chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

或

@font-face {
  font-family: 'chicagoflfregular';
  src: asset-url('chicagoflf-webfont.woff2') format('woff2'),
       asset-url('chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

或

如果你不使用 Sass，那么使用 url 你应该可以调用前缀为 assets 而不是 fonts 的字体

@font-face {
  font-family: 'chicagoflfregular';
  src: url('/assets/chicagoflf-webfont.woff2') format('woff2'),
       url('/assets/chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

如果您没有预编译您的资源，您的字体将不会出现。所以你需要预编译资产。例如生产环境做

RAILS_ENV=production bin/rails assets:precompile

别忘了重启服务器

【讨论】：

我没有使用 sass，而是将我的文件重命名为 application.css.scss 并应用您的建议导致我的字体出现。谢谢！
@Natalia 通过使用 saas，我的意思是文件扩展名是 .scss 或 .css.scss。无论如何，我很高兴它奏效了。快乐编码:)

【解决方案2】：

我建议你使用font_url helper 而不是url

@font-face {
  font-family: 'chicagoflfregular';
  src: font_url('fonts/chicagoflf-webfont.woff2') format('woff2'),
       font_url('fonts/chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

AssetUrlHelper.html#method-i-font_url 来自官方文档

更新你添加字体文件夹in config/application.rb了吗？

module YourApp
  class Application < Rails::Application
    ...
    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
    config.assets.precompile += %w( .svg .eot .woff .ttf )
    ...
  end
end

【讨论】：

我试过了，但尽管“ls app/assets/fonts/chicagolflf-webfont.woff2”从我的命令行返回字体的路径，但我没有看到使用你的字体上面的代码。

【解决方案3】：

将字体路径添加到assets路径如下：

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Fonts
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/

然后，您可以将 css 文件更改为 css.erb 文件，然后您可以使用 rails 辅助方法 font_path 或 asset_path 指定src 中的字体 URL 如下：

custom.css.erb

@font-face {
    font-family: 'chicagoflfregular';
    src: url("<%= asset_path('chicagoflf-webfont.woff2') %>") format('woff2'),
         url("<%= asset_path('chicagoflf-webfont.woff') %>") format('woff');
    font-weight: normal;
    font-style: normal;
}

请确保您已在生产环境中预编译资产。

【讨论】：