如何向 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?

这是我现在的代码:

@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/

更大的例子，假设它们直接在 assets 目录下解析

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屋！