在 Rails 资源管道中使用字体

我在 Scss 文件中配置了一些字体，如下所示：

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

实际的字体文件存储在/app/assets/fonts/中

我已经添加了config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的 application.rb 文件

编译CSS源码如下：

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

但是当我运行该应用程序时，找不到字体文件。日志：

于 2012-06-05 23:21:17 +0100 开始获取 127.0.0.1 的“/assets/icoMoon.ttf” 服务资产 /icoMoon.ttf - 404 未找到（13 毫秒）

为什么资产管道不将字体文件扁平化为 /assets？

人们有什么想法吗？

亲切的问候， 尼尔

额外信息：

在检查 Rails 控制台的资产路径和 assetprecompile 时，我得到以下信息：

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

1. 如果您的 Rails 版本介于> 3.1.0 and < 4，将您的字体放入以下任意文件夹中：

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   对于 Rails 版本> 4, you must将你的字体放在app/assets/fonts folder.

   Note:要将字体放置在这些指定文件夹之外，请使用以下配置：

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   对于 Rails 版本> 4.2, it is 受到推崇的将此配置添加到config/initializers/assets.rb.

   但是，您也可以将其添加到config/application.rb， 或者config/production.rb

2. 在 CSS 文件中声明您的字体：

   @font-face {
     font-family: 'Icomoon';
     src:url('icomoon.eot');
     src:url('icomoon.eot?#iefix') format('embedded-opentype'),
       url('icomoon.svg#icomoon') format('svg'),
       url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   

   确保您的字体名称与声明的 URL 部分中的名称完全相同。大写字母和标点符号很重要。在这种情况下，字体应具有名称icomoon.

3. 如果您将 Sass 或 Less 与 Rails 结合使用> 3.1.0（你的 CSS 文件有.scss or .less扩展名），然后更改url(...)在字体声明中font-url(...).

   否则，您的 CSS 文件应该具有扩展名.css.erb，字体声明应该是url('<%= asset_path(...) %>').

   如果您使用的是 Rails> 3.2.1， 您可以使用font_path(...)代替asset_path(...)。这个助手做了完全相同的事情，但更清晰。

4. 最后，在 CSS 中使用您的字体，就像您在font-family部分。如果它被声明为大写，你可以像这样使用它：

   font-family: 'Icomoon';