在Rails资产管道中使用字体

Question

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

为什么资产管道没有将字体文件缩小为just/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

Answer 1

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.rb或config/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';
   

Answer 2

现在这里有一个转折点:

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

摆在字体文件vendor/assets将不被默认的分期或生产预编译的-他们会在失败的Heroku.资源!

- @plapier,thoughtbot/bourbon

我坚信将供应商字体放入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,thoughtbot/bourbon

我也测试了它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-url在@ font-face块中使用,而不是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

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

1)将所有字体文件放在下面app/assets/fonts/,实际上您不限于将其放在fonts文件夹名称下.您可以放置​​任何您喜欢的子文件夹名称.例如app/assets/abc或app/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

Answer 6

这是一个使用 Rails 5.2 为 Heroku 提供自定义字体的演示。根据https://www.webpagetest.org/，它进一步优化了字体的服务速度，使其尽可能快

https://github.com/nzoschke/edgecors

首先，我从上面的答案中挑选了一些片段。对于 Rails 5.2+，您不需要额外的资产管道配置。

资产管道和 SCSS

• 将字体放入 app/assets/fonts
• 将@font-face声明放在 scss 文件中并使用font-url帮助程序

来自app/assets/stylesheets/welcome.scss：

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

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

使用 CORS 从 CDN 提供服务

我正在使用 CloudFront，添加了Heroku Edge 插件。

首先在 中配置 CDN 前缀和默认Cache-Control标头production.rb：

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

如果您尝试从 herokuapp.com URL 到 CDN URL 访问字体，您将在浏览器中收到 CORS 错误：

CORS 政策阻止了对来自“ https://edgecors.herokuapp.com ”的“ https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf ”字体的访问：没有“Access-Control-Allow” -Origin' 标头存在于请求的资源上。edgecors.herokuapp.com/ 获取https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net::ERR_FAILED

因此，配置 CORS 以允许从 Heroku 访问字体到 CDN URL：

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

提供 gzip 字体资源

资产管道构建一个.ttf.gz文件但不提供它。这个猴子补丁将资产管道 gzip 白名单更改为黑名单：

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

最终结果是app/assets/fonts从长期存在的 CloudFront 缓存中提供自定义字体文件。

Answer 7

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

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

看起来像这样:

src:url('footable.eot');

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

Answer 8

我在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

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