提问



我在我的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未找到(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

最佳参考



  1. 如果您的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.rbconfig/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 with Rails > 3.1.0(您的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';
    


其它参考1


现在这里有一个转折点:



  您应该将所有字体放在app/assets/fonts/中,因为它们默认情况下在分段和生产中进行预编译 - 它们将在推送到 heroku 时进行预编译。

  
  放置在vendor/assets中的字体文件默认情况下会在暂存或生产时预编译 NOT - 它们将在 heroku 上失败。来源![72]



- @plapier,thoughtbot/bourbon [73]



  我坚信将供应商字体放入vendor/assets/fonts
  比将它们放入app/assets/fonts更有意义。同
  这2条额外的配置对我来说很有用(上
  Rails 4):



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


- @jhilden,thoughtbot/bourbon [74]


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

其它参考2


如果您不想跟踪移动字体:


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

其它参考3


您需要在@ 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")

其它参考4


这是我在资产管道中使用字体的方法:


1)将所有字体文件放在app/assets/fonts/下,实际上您不限于将其放在fonts文件夹名称下。您可以放置​​任何您喜欢的子文件夹名称。例如。 app/assets/abcapp/assets/anotherfonts。但我强烈建议你把它放在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并查看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;
}


如果您想了解资产管道的更多工作方式,可以访问以下简单指南:
https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2[75]

其它参考5


我正在使用Rails 4.2,并且无法显示足够的图标。显示的是小盒子,而不是折叠行上的(+)和我预期的小排序箭头。在研究了这里的信息之后,我做了一个简单的更改为我的代码:删除css中的字体目录。也就是说,更改所有的css条目,如下所示:


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


看起来像这样:


src:url('footable.eot');


有效。我认为Rails 4.2已经假定了字体目录,因此在css代码中再次指定它会使字体文件无法找到。希望这可以帮助。

其它参考6


我在Rails 4.2(使用ruby 2.2.3)上遇到了这个问题,并且必须编辑font-awesome _paths.scss partial以删除对$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


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

其它参考7


我最近将Rails 3应用程序升级到Rails 4时遇到了类似的问题。我的字体在Rails 4+中工作不正常,我们只允许将字体保存在app/assets/fonts目录下。但我的Rails 3应用程序有不同的字体组织。因此,我必须配置应用程序,以便它仍然适用于Rails 4+,我的字体位于app/assets/fonts以外的其他位置。我已经尝试了几种解决方案,但在我找到非愚蠢的消化资产宝石后,它只是让它变得如此简单。[76]


通过在Gemfile中添加以下行来添加此gem:


gem 'non-stupid-digest-assets'


然后运行:


bundle install


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


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


这就是它。这很好地解决了我的问题。希望这有助于遇到像我这样的类似问题的人。

其它参考8


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

其它参考9


如果您有一个名为scaffolds.css.scss的文件,那么有可能覆盖您在其他文件中执行的所有自定义操作。我注释掉了该文件,突然一切正常。如果没有任何内容在该文件中很重要,您也可以删除它!

其它参考10


只需将您的字体放在app/assets/fonts文件夹中,并在应用程序开始时使用在application.rb中编写代码来设置自动加载路径


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;


}


试一试。


谢谢