Rails 4 生产环境在 app/assets/fonts/ 中找不到字体？

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 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。

Answer 2

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

如果您这样做了，您遇到的问题是因为您在样式表中使用标准 css url，而该文件在生产中不存在。

如果进行一些更改，您需要做什么。首先，编辑您的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'))