Css 在RubyonRails中预编译并包含字体

在遵循一些说明之后，我正在尝试预编译Twitter引导图标字体。它们与任何其他自定义字体都非常相似

这是我在

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)

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

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

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

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

我做错了什么？
根据rails指南。您应该按照以下方式在css文件中使用字体：

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

您忘记在
url
定义中使用
font-path
。您可以根据Rails指南找到更多关于Rails指南第2.3.2部分的信息。您应该按照以下方式在css文件中使用字体：

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

您忘记在
url
定义中使用
font-path
。您可以找到更多关于Rails指南第2.3.2部分的信息，我正在使用以下方法向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')
}

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

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

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

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

在Heroku和VPS/VDS上运行良好。
我使用以下方法向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')
}

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

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

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

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

在Heroku和VPS/VDS上运行良好。
为了完整起见，我还从
config/initializers/assets.rb
中删除了
Rails.application.config.assets.precompile+=%w（.svg.eot.woff.ttf）
，因为我已经添加了它。我能够按照“推荐的方式”进行操作这里：这允许我跳过erb文件并在我的application.scss中内联字体css。为了完整起见，我还从
config/initializers/assets.rb
中删除了
Rails.application.config.assets.precompile+=%w（.svg.eot.woff.ttf）
，因为我已经添加了它。我能够遵循“推荐的方式”这里：这允许我跳过erb文件并在我的application.scss中内联字体面css。