1

部署到 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;

}

#..............................
4

2 回答 2

2

如果您的字体位于 中app/assets/fonts，则不必将它们添加到加载路径中，因此您可以从application.rb.

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

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

于 2014-05-01T18:17:12.200 回答
2

将woff、eot、svg和ttf文件放在app/assets/fonts 和 font_name 中。应用程序/资产/样式表文件夹中的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;
}
于 2016-02-23T06:03:35.317 回答