css – 如何添加自定义字体到Rails应用程序?

前端之家收集整理的这篇文章主要介绍了css – 如何添加自定义字体到Rails应用程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些我想在我的RoR应用程序中使用的字体,但是他们的格式主要是.ttf和.otf等等。我如何将这些文件嵌入到Rails应用程序中?也就是说,一旦我把它们放在资产文件夹中,我将其嵌入到CSS和/或LESS文件中的语法究竟是什么呢?

编辑:
这是我现在的代码

@font-face {
    font-family: Vow;
    src: url('/assets/Vow.otf');
}
h1 {
    font-family: Vow;
    text-align: center;
}

这似乎并不适合我。 Rails控制台中的输出结果如下:

ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")

用Firebug检查页面说:

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

解决方法

结帐 http://www.css3.info/preview/web-fonts-with-font-face/

更大的例子,假设他们直接在资产目录下解决

@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

还有对于资产管道的配置,可以使用我们使用的资产/字体的内容

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')

猜你在找的CSS相关文章