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

With Rails 5, how do I reference a custom font file I have uploaded? I have placed the file in

使用Rails 5，如何引用我上传的自定义字体文件？我已将文件放入

app/assets/fonts/chicagoflf-webfont.woff

Then in my CSS file, I have

然后在我的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;
}

but I don't see that the font is loading, even after restarting my server. What is the proper path I should be using in my "url" field?

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

3 个解决方案

#1

Assuming you are using Saas, you can use either use font-url or asset-url to call your font. And considering you placed your custom fonts in app/assets/fonts, you should be able to call the fonts directly with no prefix in the path like so

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

or

要么

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

or

要么

If you are not using Saas, then with using url you should able to call the font with prefix assets not fonts like so

如果你没有使用Saas，那么使用url你应该能够使用前缀资产而不是字体来调用字体

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

And if you haven't pre-compiled your assets, your fonts won't appear. So you need to pre-compile the assets. For example for production environment do

如果您尚未预编译资产，则不会显示您的字体。所以你需要预编译资产。例如对于生产环境来说

RAILS_ENV=production bin/rails assets:precompile

and don't forget to restart the server

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

#2

I suggest you to use font_url helper instead of url

我建议你使用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 from official docs

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

UPDATE Did you added fonts folder in config/application.rb?

更新您是否在config / application.rb中添加了fonts文件夹？

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

#3

Add the fonts path to the assets path as below:

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

config/initializers/assets.rb

配置/初始化/ 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/

Then, you can change the css file to css.erb file and then you can use rails helper methods font_path or asset_path for specifying the font URL in src as below:

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

custom.css.erb

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

Please make sure you have precompiled the assets in production environment.

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