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;

有人可以帮忙吗！！

这是需要翻译的内容。

- bigpotato

Answer 1

在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'))

- PaReeOhNos

---

我需要更改我的CSS文件为Sass或其他格式才能使用font-path助手吗？ - bigpotato

您已经在使用 .scss 扩展名，因此它应该已经可供您使用 :) - PaReeOhNos

嗨！@PaRee，对于大多数人来说似乎已经起作用了，但是有两个人没有……它们末尾带有MD哈希值。我会在我的问题中更新详细信息。 - bigpotato

没事了，我想我知道了！ 这些字体正在另一个样式表中被包含，我忘记更新那个。谢谢！ - bigpotato

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'));

进行此更改将向您的字体url添加MD5哈希。为了使其工作，您需要在配置文件中将字体的扩展名（ttf、eot等）包含在config.assets.precompile中。

- Raj