自定义字体在我的 Rails 应用程序中不起作用？答案

【问题标题】：custom fonts not working in my rails app?自定义字体在我的 Rails 应用程序中不起作用？
【发布时间】：2013-08-15 14:58:19
【问题描述】：

我正在尝试在我的 rails 应用程序中使用自定义字体，但不知道我做错了什么。我在 assets 文件夹中创建了一个名为 fonts 的文件夹，其中包含我正在使用的两种字体。然后我在名为 home.css.scss.erb 的 css 文件中调用这两种字体

CSS：

@font-face {
font-family: 'Proxima Nova';    
src: url('<%= asset_path(/assets/fonts/ProximaNova-Regular.otf) %>', font);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Gotham';    
src: url('<%= asset_path(/assets/fonts/Gotham-Medium.ttf) %>', font);
font-weight: normal;
font-style: normal;
}

然后在 application.rb 的配置文件夹中添加了

config.assets.paths << "#{Rails.root}/app/assets/fonts"

但这似乎仍然不起作用..任何想法为什么？

【问题讨论】：

您的开发者工具控制台（Firebug/Chrome 开发工具）是否在加载这些字体时显示任何错误？
Chrome 控制台的“错误”标签中没有错误
试试src: font-url('Gotham-Medium.ttf')。

标签： css ruby-on-rails

【解决方案1】：

我以前使用过自定义字体，但从不需要使用asset_path 助手。在 CSS 中使用相对路径就足够了。我的设置类似于这些：

# config/application.rb
config.assets.paths << Rails.root.join("assets", "fonts")

# CSS
@font-face {
  font-family: 'Proxima Nova';    
  // No need any embeded Ruby code here
  src: url('fonts/ProximaNova-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';    
  src: url('fonts/Gotham-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

【讨论】：

如果你不想，你不需要使用 relative，但我同意不需要asset_path。试试url("/assets/fonts/ProximaNova-Regular.otf")
相对路径应该是最简单的，也适用于“vendor”、“lib”中的资产，一旦你配置了它们。我也将避免在 css/js 路径中使用“/assets/”，尽管我完全忘记了原因。
感谢您的反馈，但这仍然没有解决问题。我已经完全复制了您发布的内容。还有其他想法吗？
在运行后尝试定位字体（只需将 url 放入浏览器中）以确保它确实存在。

【解决方案2】：

在 Rails 4.2 中：

your_controller.scss

@font-face {
  font-family: "Tungsten-Bold";
  src: url('Tungsten-Bold.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}

在 config/initializers/assets.rb 中

Rails.application.config.assets.paths << "#{Rails.root}/app/assets/fonts"

Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf .otf)

并将字体文件放在>> app/assets/fonts/

【讨论】：