Question

使用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;
}

但即使重新启动我的服务器，我也看不到字体正在加载。我应该在我的＆＃34; url＆＃34;中使用的正确路径是什么？场？

Answer 1

我建议你使用font_url助手代替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

Answer 2

假设您使用的是 Saas ，您可以使用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; }

或

如果您未使用Saas ，则使用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

并且不要忘记重新启动服务器

Answer 3

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

<强>配置/初始化/ 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 helper methods font_path或asset_path用于在src中指定字体网址，如下所示：

<强> 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;
}

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

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

3 个答案: