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生产中,您需要预编译资产,这将导致rails为每个文件添加指纹并将它们放入assets文件夹中.

如果你这样做,你所遇到的问题是因为你在样式表中使用了标准的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'))