将字体添加到预编译

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

目前，我有以下几点：

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; 
}

请帮帮忙！

来源

2014-05-20 user3399101

试试这个'config.assets.precompile <

谢谢！试着，随着：config.assets.paths << Rails.root.join（'应用程序'，'资产'，'字体'）它仍然不是预编译:( – user3399101

将大写字母改为小写，'SourceSansPro-经常更改为'sourcesanspro-regular' http://stackoverflow.com/a/10907276/1297435 –

在你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; 
}

来源

2014-05-20 22:25:18 jcypret

我们用这个在Heroku &它的工作原理 - 对@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进来

如果你试试这个，它应该工作

来源

2014-05-21 09:23:54

将字体添加到预编译

回答

相关问题