Question

我使用Rails 4并尝试部署到生产环境，但我的字体加载不正确。我的所有字体都在app/assets/fonts文件夹中。当我进入主页并查看浏览器控制台时，我看到了：

    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/sourcesanspro-regular-webfont.woff"
    sources...nt.woff
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/OpenSans-CondLight-webfont.woff"
    OpenSan...nt.woff
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/fontawesome-webfont.woff?v=4.0.3"
    fontawe...v=4.0.3
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/sourcesanspro-regular-webfont.ttf"
    sources...ont.ttf
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/OpenSans-CondLight-webfont.ttf"
    OpenSan...ont.ttf
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/fontawesome-webfont.ttf?v=4.0.3"
    fontawe...v=4.0.3

我的项目目录在app/assets中显示如下：

    .
    ├── fonts
    │   ├── DroidSans-webfont.eot
    │   ├── DroidSans-webfont.svg
    │   ├── DroidSans-webfont.ttf
    │   ├── DroidSans-webfont.woff
    │   ├── FontAwesome.otf
    │   ├── OpenSans-CondLight-webfont.eot
    │   ├── OpenSans-CondLight-webfont.svg
    │   ├── OpenSans-CondLight-webfont.ttf
    │   ├── OpenSans-CondLight-webfont.woff
    │   ├── fontawesome-webfont.eot
    │   ├── fontawesome-webfont.svg
    │   ├── fontawesome-webfont.ttf
    │   ├── fontawesome-webfont.woff
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   ├── sourcesanspro-regular-webfont.eot
    │   ├── sourcesanspro-regular-webfont.svg
    │   ├── sourcesanspro-regular-webfont.ttf
    │   └── sourcesanspro-regular-webfont.woff
    └── stylesheets
        ├── admin.css
        ├── application.css.scss
        ├── bootstrap.css
        ├── font-awesome.min.css
        ├── jquery.bxslider.css
        ├── smoothproducts.css
        └── style.css.scss

在我的application.css.scss中，我有这个：

     *
     *= require_tree .
     *= require_self
     */
    @import 'style';

在我的style.css.scss我有这个：

    @font-face {
        font-family: 'open_sanscondensed_light';
        src: url('OpenSans-CondLight-webfont.eot');
        src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
             url('OpenSans-CondLight-webfont.woff') format('woff'),
             url('OpenSans-CondLight-webfont.ttf') format('truetype'),
             url('OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'source_sans_proregular';
        src: url('sourcesanspro-regular-webfont.eot');
        src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('sourcesanspro-regular-webfont.woff') format('woff'),
             url('sourcesanspro-regular-webfont.ttf') format('truetype'),
             url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'DroidSansRegular';
        src: url('DroidSans-webfont.eot');
        src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
             url('DroidSans-webfont.woff') format('woff'),
             url('DroidSans-webfont.ttf') format('truetype'),
             url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;

有人可以帮忙!!

Answer 1

在Rails生产中，您需要预编译资产，这将导致rails为每个文件添加指纹并将它们放入assets文件夹中。

如果您已经完成此操作，那么您遇到的问题是因为您在样式表中使用了标准的css网址，并且该文件在生产中不存在。

如果进行一些更改，您需要做什么。首先，编辑config/environments/production.rb以在预编译阶段包含字体

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

然后预编译您的资产

RAILS_ENV=production rake assets:precompile

然后在样式表中，rails提供了特定于字体的URL帮助程序，因此您可以执行

src: url(font-path('myfont-webfont.eot'))

Answer 2

了解Rails Asset Pipeline。

在“生产”环境中预编译资产

RAILS_ENV=production rake assets:clean assets:precompile

在CSS中，使用asset_path帮助器。像这样：

而不是

src: url('sourcesanspro-regular-webfont.eot');

使用

src: url(font-path('sourcesanspro-regular-webfont.eot'));

进行此更改会将MD5哈希值添加到您的字体网址中。为此，您需要在配置文件中将字体的扩展名（ttf，eot等）包含到config.assets.precompile。

Rails 4生产环境没有找到app / assets / fonts /中的字体？

2 个答案: