在Rails资产pipe道中使用字体

我有一些字体被configuration在我的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"); } 

但是当我运行应用程序的字体文件没有被发现。 日志：

开始获取“/assets/icoMoon.ttf”为127.0.0.1于2012-06-05 23:21:17 +0100服务资产/icoMoon.ttf – 404未find（13ms）

为什么资产pipe道没有将字体文件压缩成公正/资产？

任何想法的人？

亲切的问候，尼尔

额外信息：

当检查轨道控制台的资产path和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 

Answer 1

1. 如果您使用Rails> 3.1.0和<4，则可以将字体放在文件夹app/assets/fonts ， lib/assets/fonts或vendor/assets/fonts 。

   如果您使用的是Rails 4+，则只能将字体放在文件夹app/assets/fonts 。

   如果您想将它们放置在这些指定文件夹之外，则需要添加以下configuration：

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

   如果您使用的是Rails 4.2+，那么build议将这个configuration添加到文件config/initializers/assets.rb 。

   如果不是，请将其添加到文件application.rb或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. 如果您在Rails 3.1.0以上版本中使用Sass或Less（因此您的css文件具有.scss或.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'; 

Answer 2

现在这是一个转折：

您应该将所有字体放在app/assets/fonts/因为它们将在预设阶段进行预编译，默认情况下它们将被预编译，当推送到heroku时 。

放置在vendor/assets字体文件在默认情况下不会在分期或生产时预编译 – 它们将在heroku上失败。 资源！

– @plapier，思想者/波本威士忌

我坚信，将供应商字体放入vendor/assets/fonts比将其放入app/assets/fonts更有意义。 有了这两行额外configuration，这对我来说工作得很好（在Rails 4上）：

 app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ 

– @jhilden，思想者/波本威士忌

我也testing了rails 4.0.0 。 实际上，最后一行足以安全地预编译vendor文件夹中的字体。 花了几个小时弄清楚了。 希望它帮助了一个人。

Answer 3

如果你不想跟踪移动你的字体：

 # Adding Webfonts to the Asset Pipeline config.assets.precompile << Proc.new { |path| if path =~ /\.(eot|svg|ttf|woff)\z/ true end } 

Answer 4

你需要在你的@ font-face块中使用font-url ，而不是url

 @font-face { font-family: 'Inconsolata'; src:font-url('Inconsolata-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

以及application.rb中的这一行，正如你所提到的（对于app/assets/fonts

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

Answer 5

这里我使用资产pipe道中的字体的方法：

1）把所有的字体文件放在app/assets/fonts/ ，实际上你并不限制把它放在fonts文件夹名下。 你可以把你喜欢的任何子文件夹名称。 例如app/assets/abc或app/assets/anotherfonts 。 但我强烈build议你把它放在app/assets/fonts/为更好的文件夹结构。

2）从你的sass文件中，使用sass helper font-path来请求你的字体资源

 @font-face { font-family: 'FontAwesome'; src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0'); src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'), url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'), url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'), url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'), url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

3）运行bundle exec rake assets:precompile从本地机器bundle exec rake assets:precompile并查看你的application.css结果。 你应该看到这样的东西：

 @font-face { font-family: 'FontAwesome'; src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0"); src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } 

如果您想了解更多资产pipe道工作方式，请访问以下简单指南： https : //designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Answer 6

我在Rails 4.2（使用ruby 2.2.3）时遇到了这个问题，不得不编辑font-awesome _paths.scss偏移来删除对$fa-font-path引用并删除前导斜杠。 以下是破碎的：

 @font-face { font-family: 'FontAwesome'; src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

以下工作：

 @font-face { font-family: 'FontAwesome'; src: font-url('fontawesome-webfont.eot?v=#{$fa-version}'); src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

另一种方法是简单地删除插入的$fa-font-path之后的正斜杠，然后将$fa-font-path定义为一个空string或带有正斜杠的子目录（根据需要）。

请记住重新编译资产并根据需要重新启动服务器。 例如，在一个乘客设置：

 prompt> rake assets:clean; rake assets:clobber prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile prompt> service passenger restart 

然后重新加载您的浏览器。

Answer 7

我正在使用Rails 4.2，并不能得到足迹的图标显示。 小盒子正在显示，而不是（+）折叠行和我期望的小sorting箭头。 在研究了这里的信息后，我对代码做了一个简单的修改：删除css中的字体目录。 也就是说，改变所有这样的CSS条目：

 src:url('fonts/footable.eot'); 

看起来像这样：

 src:url('footable.eot'); 

有效。 我认为Rails 4.2已经采用了字体目录，所以在css代码中再次指定它使字体文件不被发现。 希望这可以帮助。

Answer 8

当我将Rails 3应用程序升级到Rails 4时，我遇到了类似的问题。 我的字体在Rails 4+中工作不正常，我们只允许将字体保留在app/assets/fonts目录下。 但我的Rails 3应用程序有不同的字体组织。 所以我不得不configuration应用程序，使它仍然适用于Rails 4+，我的字体在app/assets/fonts以外的其他地方。 我已经尝试了几个解决scheme，但是当我发现非愚蠢的消化资产gem后，它变得如此简单。

通过将以下行添加到您的Gemfile来添加这个gem：

 gem 'non-stupid-digest-assets' 

然后运行：

 bundle install 

最后，在config / initializers / non_digest_assets.rb文件中添加以下行：

 NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ] 

而已。 这很好地解决了我的问题。 希望这能帮助遇到像我这样的类似问题的人。

Answer 9

如果您有一个名为scaffolds.css.scss的文件，那么您有可能覆盖您在其他文件中执行的所有自定义事件。 我注意到这个文件，突然一切正常。 如果该文件中没有任何重要的内容，那么你可以直接删除它！

Answer 10

在我的情况下，原来的问题是使用asset-url没有结果，而不是普通的url CSS属性。 在Heroku中使用asset-url结束了我的工作。 Plus在/assets/fonts文件夹中设置字体，并在不添加任何子文件夹或任何其他configuration的情况下调用asset-url('font.eot') 。

Answer 11

只需将您的字体放在app / assets / fonts文件夹中，并在应用程序启动时使用在application.rb中编写代码来设置自动载入path

config.assets.paths << Rails.root.join（“app”，“assets”，“fonts”）和

然后在css中使用下面的代码。

@ font-face {

  font-family: 'icomoon'; src: asset-url('icomoon.eot'); src: asset-url('icomoon.eot') format('embedded-opentype'), asset-url('icomoon.woff') format('woff'), asset-url('icomoon.ttf') format('truetype'), asset-url('icomoon.svg') format('svg'); font-weight: normal; font-style: normal; 

}

试一试。

谢谢