在heroku上找不到字体（404）

Question

部署到heroku后，字体会丢失，这意味着在页面加载时找不到它们。

#application.ru

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

这是论坛上的建议。但这并不奏效。在部署到heroku期间没有错误。

我还能做什么？

/app/assets/stylesheets/_fonts.css.scss

#..............................

@font-face {
    font-family: 'Verb Extra Bold';
    src: asset-url('verbextrabold-webfont.eot');
    src: asset-url('verbextrabold-webfont.eot?#iefix') format('embedded-opentype'),
         asset-url('verbextrabold-webfont.woff') format('woff'),
         asset-url('verbextrabold-webfont.ttf') format('truetype'),
         asset-url('verbextrabold-webfont.svg#verbextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

#..............................

Answer 1

如果您的字体位于app/assets/fonts，则不必将其添加到加载路径，因此您可以从application.rb中删除这两行。

尝试在样式表中将asset-url更改为font-url。

您可以通过在终端中运行ENV=production rake assets:precompile来检查预编译是否在本地运行。

Answer 2

将 woff ， eot ， svg 和 ttf 文件放入 app / assets / fonts < /强> 和 app / assets / stylesheets 文件夹中的 scss

不要忘记 .scss 扩展程序和 asset_path 帮助程序

font-url( asset_path('file.woff')) format('woff')

这在assets.rb中：

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

Pe-icon-7-stroke.css示例：

@font-face {
    font-family: 'Pe-icon-7-stroke';
    src:url(asset_path('Pe-icon-7-stroke.eot?-2irksn'));
    src:url( asset_path('Pe-icon-7-stroke.eot?#iefix-2irksn')) format('embedded-opentype'),
        font-url( asset_path('Pe-icon-7-stroke.woff?-2irksn')) format('woff'),
        font-url(asset_path('Pe-icon-7-stroke.ttf?-2irksn')) format('truetype'),
        font-url(asset_path('Pe-icon-7-stroke.svg?-2irksn#Pe-icon-7-stroke')) format('svg');
    font-weight: normal;
    font-style: normal;
}