Question

按照一些说明here后，我试图预编译Twitter Bootstrap Glyphicon字体。它们几乎就像任何其他自定义字体一样。

以下是bootstrap.min.css.scss

中的css

@font-face{font-family:'Glyphicons Halflings';
           src:url(glyphicons-halflings-regular.eot);
           src:url(glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
               url(glyphicons-halflings-regular.woff2) format('woff2'),
               url(glyphicons-halflings-regular.woff) format('woff'),
               url(glyphicons-halflings-regular.ttf) format('truetype'),
               url(glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

以下是config/initializers/assets.rb

中的代码

Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf)

运行public/assets后，我的字体显示在rake assets:precompile。它们看起来像这样：

glyphicons-halflings-regular-3c36a8aade6ab06e8a1af9ab88110382.woff

最后，这是JavaScript控制台输出

Failed to load resource: the server responded with a status of 404 (Not Found)
https://dry-temple-2989.herokuapp.com/assets/glyphicons-halflings-regular.woff

我做错了什么？

Answer 1

我正在使用以下方法向Rails添加字体：

1）。将.erb扩展名添加到您的css文件中。

bootstrap.min.css.scss.erb

2）。将url重构为此文件中的字体。

@font-face{font-family:'Glyphicons Halflings';
           src:url('<%= asset_path('glyphicons-halflings-regular.eot') %>');
           src:url('<%= asset_path('glyphicons-halflings-regular.eot') + '?#iefix' %>') format('embedded-opentype'),
               url('<%= asset_path('glyphicons-halflings-regular.woff2') %>') format('woff2'),
               url('<%= asset_path('glyphicons-halflings-regular.woff') %>') format('woff'),
               url('<%= asset_path('glyphicons-halflings-regular.ttf') %>') format('truetype'),
               url('<%= asset_path('glyphicons-halflings-regular.svg') + '#glyphicons_halflingsregular' %>') format('svg')
}

3）。将*= require bootstrap.min.css.scss.erb添加到application.css文件。

4）。在fonts文件夹中创建app/assets文件夹并在其中移动字体文件。

5）。将这些行添加到config/application.rb

config.assets.enabled = true
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

6）。将这些行添加到config/environments/production.rb

config.assets.compile = true
config.assets.precompile += %w( .svg .eot .woff .woff2 .ttf )

适用于Heroku和VPS / VDS。

Answer 2

根据导轨指南。您应该按照以下方式在css文件中使用字体：

url(font-path(glyphicons-halflings-regular.woff))

您忘记在font-path定义中使用url。您可以在Rails指南第2.3.2部分http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

上找到更多信息

在Ruby on Rails中预编译并包含字体

2 个答案: