如何添加自定义字体到Rails应用程序？

问题描述：

我有一些字体，我想在我的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应用程序？

相关推荐