如何在Rails应用中添加自定义字体？

小编典典

如何在Rails应用中添加自定义字体？

css

我想在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

阅读 467

2020-05-16

共1个答案

小编典典

较大的示例，假设它们直接在资产目录下解决

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

对不起，我不知道少

同样，为了使资产管道的配置具有资产/字体的内容，我们使用以下命令：

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

2020-05-16