自定义字体在 Rails 上不起作用答案

【问题标题】：Custom Font Not Working on Rails自定义字体在 Rails 上不起作用
【发布时间】：2014-01-22 06:22:33
【问题描述】：

我已经阅读了很多关于在 Rails 应用程序上使用自定义字体的文章，但我仍然遇到问题。

我从 dafont.com 下载了 X 字体。我解压了，包里面有x.otf。然后我把它安装在我的电脑上，但是当我在我的应用程序中使用它时，字体被扭曲了。

然后我从 dafont.com 下载了 Y 字体。我解压了，里面有 y.ttf。我没有将它安装在我的机器上，而是将它放在 /assets/fonts 中。然后我在 custom.css.scss 文件中添加了以下内容。

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/fonts/y.ttf');
  src: url('/assets/fonts/y.ttf?iefix') format('eot'),
  url('/assets/fonts/y.woff') format('woff'),
  url('/assets/fonts/y.ttf') format('truetype'),
  url('/assets/fonts/y.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

然后我在 custom.css.scss 样式表中调用它

body {
    font-family: y;
}

当我刷新仍然没有成功。关于为什么 X 失真或 Y 不起作用的任何线索？

【问题讨论】：

尝试将它们放在公共目录 - /public/assets/fonts/ - 我知道这超出了 Rails 资产管道，但你会得到它的工作
这对 Y 有效。我卸载了 X，并尝试了同样的方法，但现在 X 无法工作。我对字体类型一无所知，但我想知道格式是否与它有关。

标签： css ruby-on-rails fonts

【解决方案1】：

您可以将资产管道与字体一起使用。首先在 application.rb 中添加：

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

将custom.css.scss 文件重命名为custom.css.scss.erb 并为每个字体文件使用asset_path，如下所示：

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('<%= asset_path("y.ttf") %>');
  src: url('<%= asset_path("y.ttf?iefix") %>') format('eot'),
  url('<%= asset_path("y.woff") %>') format('woff'),
  url('<%= asset_path("y.ttf") %>') format('truetype'),
  url('<%= asset_path("y.svg#webfont3AwWkQXK") %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

【讨论】：