Question

如何添加资产/字体文件夹以进行预编译？

我目前有以下内容：

  config.assets.precompile += %w( saas_admin.css saas_admin.js stripe_form.js fonts)

哪个不起作用，我应该放置资产/字体吗？

mystyle.css.erb

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('SourceSansPro-Regular.eot?') format('eot'),
         url('SourceSansPro-Regular.otf')  format('opentype'),
         url('SourceSansPro-Regular.woff') format('woff'),
         url('SourceSansPro-Regular.ttf')  format('truetype'),
         url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
         font-weight: normal;
         font-style: normal;
}
@font-face{
    font-family: 'MyriadProRegular';
    src: url('myriadpro-regular-webfont.eot');
    src: local('?'), url('myriadpro-regular-webfont.woff') format('woff'),
    url('myriadpro-regular-webfont.ttf') format('truetype'),
    url('myriadpro-regular-webfont.svg#webfont8y9VojoZ') format('svg');
    font-weight: normal;
    font-style: normal;
}

请帮忙！

Answer 1

在config/environments/production.rb文件中，添加以下行：

config.assets.precompile += %w( *.eot *.woff *.ttf *.otf *.svg )

这将包括预编译过程中的所有字体文件。

然后在您的Sass文件中，使用font-url帮助程序，以便字体与资产管道一起正常工作。这将查看您的字体文件的vendor/assets/fonts或app/assets/fonts内部。

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: font-url('SourceSansPro-Regular.eot?') format('eot'),
         font-url('SourceSansPro-Regular.otf')  format('opentype'),
         font-url('SourceSansPro-Regular.woff') format('woff'),
         font-url('SourceSansPro-Regular.ttf')  format('truetype'),
         font-url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
         font-weight: normal;
         font-style: normal;
}

Answer 2

我们在Heroku＆amp; amp;它有效 - 与@jcypret的答案略有不同，但希望它会有所帮助：

#config/environments/production.rb
config.assets.precompile += ["layout/fonts/fonts.css"] #-> you won't need this
config.assets.precompile += %w( .svg .eot .woff .ttf )

#app/assets/stylesheets/layout/fonts/fonts.css.sass (this is where we store our file...)
@font-face
    font:
        family: 'Ionicons'
        weight: normal
        style: normal
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1')
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1#iefix') format('embedded-opentype'), asset_url('layout/fonts/IonIcons/ionicons.ttf?v=1.4.1') format('truetype'), asset_url('layout/fonts/IonIcons/ionicons.woff?v=1.4.1') format('woff'), asset_url('layout/fonts/IonIcons/ionicons.svg?v=1.4.1#Ionicons') format('svg')

asset_url

注意我们如何使用asset_url路径？

我知道其中一个答案建议使用fonts-url，但我们更喜欢使用asset_url（更可靠）。

你通常对字体的主要问题，尤其是Heroku，是asset fingerprinting（引用url: file只会保留静态文件）。您需要能够引用动态生成的文件，这是asset_url进来的地方

如果您尝试这样做，应该工作

将字体添加到预编译

2 个答案: