自定义字体未在 Rails 中加载

Question

我有一个 Rails 4.1.8 应用程序，我正在尝试使用自定义 avenir 字体。 我在 app/assets/fonts 和 app/assets/stylesheets 的 2 个地方添加了字体。我还在供应商/资产/样式表/字体中添加了其中一些。 其中一种字体 AvenirLTStd-Heavy.otf 没有以某种方式得到应用。

screen.scss

@font-face {
  font-family: "AvenirLTStd-Heavy";
  src: url('/assets/fonts/AvenirLTStd-Heavy.otf');
}

.avenir-heavy {
  font-family: "AvenirLTStd-Heavy";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

application.rb

config.assets.paths << Rails.root.join(* %w(vendor assets bower_components))
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'fonts')    
config.assets.precompile += %w( .svg .eot .woff .ttf .otf)

config/initializers/assets.rb

Rails.application.config.assets.paths << "#{Rails.root}/app/assets/fonts"
Rails.application.config.assets.paths << "#{Rails.root}/vendor/assets/stylesheets/fonts"
Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf .otf)

我做错了什么？

Answer 1

在资产预编译路径中包含您的字体路径，只需使用字体名称并指定格式如下：

@font-face {
  font-family: "AvenirLTStd-Heavy";
  src: url('AvenirLTStd-Heavy.otf') format("opentype");
}