如何添加自定义字体到Rails应用程序? [英] How to add a custom font to Rails app?
问题描述
我有一些字体,我想在我的RoR应用程序中使用,但他们的格式主要是.ttf和.otf,等等。我如何去嵌入这些文件在我的Rails应用程序?也就是说,一旦我把它们放在我的资源文件夹,我的语法是什么嵌入我的CSS和/或LESS文件?
I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?
编辑:
这是我现在的代码:
Here's the code I have for now:
@font-face {
font-family: Vow;
src: url('/assets/Vow.otf');
}
h1 {
font-family: Vow;
text-align: center;
}
这似乎并不适用于我。 Rails控制台中的输出是:
It doesn't seem to be working for me. The output in the Rails console is something along the lines of:
ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")
用Firebug检查页面说:
And examining the page with Firebug says:
downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf
推荐答案
Checkout http://www.css3.info/preview/web -fonts-with-font-face /
Checkout http://www.css3.info/preview/web-fonts-with-font-face/
更大的例子,假设它们直接在assets下解析dir
Larger example, assuming they're resolved directly under the assets dir
@font-face {
font-family: 'Nokia Pure Headline';
src: url('/assets/nokiapureheadlinerg-webfont.eot');
src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
font-weight: normal;
font-style: normal;
}
对不起,我不知道LESS
Im sorry I dont know LESS
对于资产管道的配置,我们使用的资产/字体的内容也可以使用:
Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
这篇关于如何添加自定义字体到Rails应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!