ruby on rails - 在Rails资产管道中使用字体




ruby-on-rails sass (8)

我在我的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/[email protected]/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/[email protected]/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/[email protected]/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. 如果您在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(...) 。 这位助手做的事情完全一样,但更清楚。

  4. 最后,像你在font-family部分中声明的那样,在你的CSS中使用你的字体。 如果它被宣布为大写,你可以像这样使用它:

    font-family: 'Icomoon';
    

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

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


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

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

当我最近将Rails 3应用升级到Rails 4时,我遇到了类似的问题。 我的字体在Rails 4+中工作不正常,我们只允许将字体保留在app/assets/fonts目录下。 但我的Rails 3应用程序有不同的字体组织。 所以我不得不配置应用程序,以便它仍然可以在Rails 4+中使用,使我的字体位于app/assets/fonts以外的其他位置。 我尝试了几种解决方案,但在找到non-stupid-digest-assets宝石后,它变得如此简单。

通过将以下行添加到您的Gemfile中来添加此gem:

gem 'non-stupid-digest-assets'

然后运行:

bundle install

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

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

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


我使用的是Rails 4.2,无法找到足迹图标。 小盒子正在显示,而不是(+)折叠行和我期望的小排序箭头。 在研究了这里的信息之后,我对代码做了一个简单的修改:删除css中的字体目录。 也就是说,改变所有这样的CSS条目:

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

看起来像这样:

src:url('footable.eot');

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


现在这是一个转折点:

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

放置在vendor/assets字体文件在默认情况下不会在分段或生产中预编译 - 它们将在heroku上失败。 Source!

- @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文件夹中的字体。 花了几个小时弄清楚了。 希望它帮助了某人。


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

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从本地机器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 : https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2







assets