在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已启动GET“/assets/icoMoon.ttf”for 127.0.0.1服务资产/icoMoon.ttf - 404未找到（13ms）
为什么资产管道没有将字体文件压缩成公正/资产？
任何想法的人？
亲切的问候，尼尔
额外信息：
当检查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
如果您的Rails版本介于> 3.1.0和< 4 ，请将您的字体放在以下任何文件夹中：
app/assets/fonts lib/assets/fonts vendor/assets/fonts 对于Rails版本> 4 ，您必须将您的字体放在app/assets/fonts文件夹中。
注意：要将字体放置在这些指定文件夹之外，请使用以下配置：
config.assets.precompile << /.(?:svg|eot|woff|ttf)z/
对于Rails版本> 4.2 ， 建议将此配置添加到config/initializers/assets.rb 。
但是，您也可以将其添加到config/application.rb或config/production.rb
在你的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 。
如果您在Rails > 3.1.0 （您的CSS文件具有.scss或.less扩展名）中使用Sass或Less，则将字体声明中的url(...)更改为font-url(...) 。
否则，你的CSS文件应该有扩展名.css.erb ，字体声明应该是url('<%= asset_path(...) %>') 。
如果您使用的是Rails > 3.2.1 ，则可以使用font_path(...)而不是asset_path(...) 。 这位助手做的事情完全一样，但更清楚。
最后，像你在font-family部分中声明的那样，在你的CSS中使用你的字体。 如果它被宣布为大写，你可以像这样使用它：
font-family: 'Icomoon';
现在这是一个转折点：
你应该把所有的字体app/assets/fonts/时被推到Heroku的，因为他们将在舞台和产量得到预编译默认情况下，他们将获得预编译。
放置在vendor/assets字体文件在默认情况下不会在分段或生产中预编译 - 它们将在heroku上失败。 资源！
- @plapier，thinkbot /波旁
我坚信，将供应商字体放入vendor/assets/fonts比将其放入app/assets/fonts更有意义。 有了这两行额外的配置，这对我来说效果很好（在Rails 4上）：
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /.(?:svg|eot|woff|ttf)$/
- @jhilden，思想者/波本威士忌
我也在rails 4.0.0上测试过它。 实际上，最后一行足以安全地预编译vendor文件夹中的字体。 花了几个小时弄清楚了。 希望它帮助了某人。
如果你不想跟踪移动你的字体：
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ /.(eot|svg|ttf|woff)z/
true
end
}