在Rails资产管道中使用字体

@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');
}

@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");
}

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


在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。如果您在Rails中使用Sass或更少，请使用> 3.1.0（您的CSS文件的扩展名为.scss或.less），然后在字体声明为url(...)。

否则，您的CSS文件应具有扩展名font-url(...)，字体声明应为.css.erb。使用url('<%= asset_path(...) %>')而不是> 3.2.1。该帮助程序执行的操作完全相同，但更清楚。如果声明为大写，则可以这样使用：

font-family: 'Icomoon';

#2 楼

现在这是一个转折点：


您应该将所有字体放在app/assets/fonts/中，因为它们会在默认情况下在登台和生产时进行预编译-将其推到heroku时将进行预编译。 br />默认情况下，放置在vendor/assets中的字体文件不会在登台或生产时进行预编译—在Heroku上它们将失败。资料来源！比将它们放入vendor/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

我还在app/assets/fonts上对其进行了测试。实际上，最后一行足以安全地预编译rails 4.0.0文件夹中的字体。花了几个小时才弄清楚。希望对别人有所帮助。

#3 楼

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

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

#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")

#5 楼

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

1）将所有字体文件放在app/assets/fonts/下，实际上您不受限制地放在fonts文件夹名下。您可以输入任何喜欢的子文件夹名称。例如。 app/assets/abc或app/assets/anotherfonts。但是，我强烈建议您将其放在app/assets/fonts/下，以获得更好的文件夹结构。

2）从sass文件中，使用sass帮助器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;
}

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

#6 楼

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

然后重新加载浏览器。

#7 楼

我使用的是Rails 4.2，无法显示合适的图标。显示了小方框，而不是折叠行中的（+）和我期望的小排序箭头。在研究了这里的信息之后，我对代码做了一个简单的更改：在CSS中删除字体目录。也就是说，像这样更改所有的css条目：

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

看起来像这样：

src:url('footable.eot');

有效。我认为Rails 4.2已经假定了字体目录，因此在CSS代码中再次指定它会导致找不到字体文件。希望这可以帮助。

#8 楼

这是一个回购，演示了如何在Heroku上使用Rails 5.2提供自定义字体。根据https://www.webpagetest.org/

https://github.com/nzoschke/edgecors
<，它进一步优化了字体的投放速度。 br />首先，我从上面的答案中选取了一些内容。对于Rails 5.2+，您不需要额外的资产管道配置。将app/assets/fonts声明放置在scss文件中，并使用@font-face帮助程序

来自font-url的内容：
我正在使用CloudFront，并添加了Heroku Edge插件。

首先在app/assets/stylesheets/welcome.scss中配置CDN前缀和默认Cache-Control标头：
如果尝试从herokuapp.com URL到CDN URL访问字体，则会在浏览器中出现CORS错误：


在'https访问字体起源'https://edgecors.herokuapp.com'的：//d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf'已被CORS政策阻止：
否'Access-Control-Allow-Origin标头出现在请求的资源上。 edgecors.herokuapp.com/
获取https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED


因此将CORS配置为允许访问到从Heroku到CDN URL的字体：

@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;
}

为gzip字体资产提供服务

资产管道建立了一个production.rb文件，但没有服务。该猴子补丁将资产管道gzip白名单更改为黑名单：

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

最终结果是.ttf.gz中的自定义字体文件由长期存在的CloudFront缓存提供。 br />

#9 楼

最近将Rails 3应用程序升级到Rails 4时，我遇到了类似的问题。我的字体不能在Rails 4+中正常工作，我们只能将字体保留在app/assets/fonts目录下。但是我的Rails 3应用程序具有不同的字体组织。因此，我必须配置该应用程序，以便它仍然可以与Rails 4+一起使用，并且字体可以位于app/assets/fonts以外的其他位置。我尝试了几种解决方案，但是找到非愚蠢的消化型宝石后，它变得非常简单。

通过将以下行添加到您的Gemfile中来添加此宝石：

gem 'non-stupid-digest-assets'

然后运行：

bundle install

最后在您的config / initializers / non_digest_assets.rb文件中添加以下行： br />

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

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

#10 楼

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

#11 楼

如果您有一个名为scaffolds.css.scss的文件，则可能会覆盖其他文件中正在执行的所有自定义操作。我注释掉了该文件，然后突然一切正常。如果该文件中没有任何重要内容，则最好将其删除！

#12 楼

只需将您的字体放在app / assets / fonts文件夹中，并在应用程序开始时使用在application.rb中写入代码来设置自动加载路径。 “，” 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;

}

试一试。

谢谢