我有一些字体被配置在我的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。加入(“应用程序”,“资产”,“字体”)到我的应用程序。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");
}

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

start GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100 已服务资产/icoMoon.ttf - 404 Not Found (13ms)

为什么资产管道不把字体文件压缩成/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

当前回答

我使用Rails 4.2,并不能得到footable图标显示。显示的是小方框,而不是我所期望的折叠行上的(+)和小排序箭头。在学习了这里的信息之后,我对代码做了一个简单的更改:删除css中的字体目录。也就是说,像这样更改所有的css条目:

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

看起来像这样:

src:url('footable.eot');

它工作。我认为Rails 4.2已经假定了字体目录,所以在css代码中再次指定它会使字体文件找不到。希望这能有所帮助。

其他回答

在我的情况下,最初的问题是使用资产url没有结果,而不是简单的url css属性。使用asset-url最终为我在Heroku工作。另外,在/assets/fonts文件夹中设置字体并调用asset-url('font.eot'),而无需添加任何子文件夹或任何其他配置。

我使用Rails 4.2,并不能得到footable图标显示。显示的是小方框,而不是我所期望的折叠行上的(+)和小排序箭头。在学习了这里的信息之后,我对代码做了一个简单的更改:删除css中的字体目录。也就是说,像这样更改所有的css条目:

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

看起来像这样:

src:url('footable.eot');

它工作。我认为Rails 4.2已经假定了字体目录,所以在css代码中再次指定它会使字体文件找不到。希望这能有所帮助。

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

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

以及这条线在应用中。Rb,正如你提到的(对于app/assets/fonts中的字体

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

这里有一个转折:

你应该把所有的字体放在app/assets/fonts/中,因为它们在默认情况下会在登台和生产中被预编译——当推送到heroku时,它们会被预编译。 默认情况下,放置在vendor/assets中的字体文件不会在登台或生产时预编译-它们将在heroku上失败。源!

- @plapier,以为机器人/波旁威士忌

我坚信把厂商字体放到厂商/资产/字体中 这比把它们放到app/assets/字体中更有意义。与 这两行额外的配置对我来说工作得很好 Rails 4):

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

- @jhilden, thoughtbot/波旁威士忌

我还在rails 4.0.0上测试了它。实际上,最后一行已经足够从供应商文件夹安全预编译字体了。花了几个小时才弄明白。希望它能帮助到某人。

我在Rails 4.2 (ruby 2.2.3)上遇到了这个问题,不得不编辑字体很棒的_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定义为一个空字符串或带正斜杠的子目录(根据需要)。

记得根据需要重新编译资产并重新启动服务器。例如,在乘客设置中:

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

然后重新加载浏览器。