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

Question

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

25

我有几种字体想在我的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

- tanookiben

请查看此链接：https://dev59.com/4msz5IYBdhLWcg3wVGLJ - AnkitG

3个回答

28

将自定义字体添加到Rails应用程序

选择字体类型并下载
例如
前往http://www.dafont.com
选择字体并下载
生成字体文件

访问http://www.fontsquirrel.com/
选择 - web font generator - 选择您下载的字体(解压缩从http://www.dafont.com下载的文件)。
检索字体文件
该站点将生成另一个zip文件，其中包含该字体样式所需的所有内容。
从该zip文件中解压缩并打开css，将css复制到您的html或css文件中。
将字体添加到Rails应用程序中

(如何向Rails应用程序添加自定义字体？)

config/application.rb
```
 config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"  
```
将其添加到视图中：
将其添加到视图中：
Add it to the view:

<html lang="en">  
  <head>  
    <style>  
      @font-face {  
        font-family: 'a_sensible_armadilloregular';  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot');  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),  
          url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),  
          url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),  
          url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');  
        font-weight: normal;  
        font-style: normal;  
     }  
     .content p {  
        font-family: 'a_sensible_armadilloregular';  
        font-size: 42px;  
     }  
   </style>  
 </head>  
 <body>  
   <div class="content">  
     <p>sample text</p>  
   </div>  
 </body>

- praaveen V R

3

我认为最好的做法是将其放置在config/initializers/assets中，与其他资产相关的配置一起使用此语法：Rails.application.config.assets.paths << Rails.root.join("/app/assets/fonts")。 - rosalynnas

2

使用谷歌字体将自定义字体添加到Rails应用程序中

例如，我正在使用Freckle Face：
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
快速使用：Freckle Face

1. 选择您想要的样式：
对页面加载时间的影响
提示：使用许多字体样式会减慢网页速度，因此只选择您实际需要的字体样式。

2. 选择您想要的字符集：
提示：如果您只选择所需的语言，则可以帮助防止网页变慢。
拉丁文（latin）
扩展拉丁文（latin-ext）

3. 将此代码添加到您的网站：
说明：要将您的收藏嵌入到网页中，请将代码复制为HTML文档的第一个元素。

<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>

4. 将字体集成到您的CSS中：
Google Fonts API将生成必要的浏览器特定的CSS以使用这些字体。您只需要将字体名称添加到您的CSS样式中即可，例如：

font-family: 'Freckle Face', cursive;

说明：将字体名称添加到CSS样式中，就像你通常使用其他字体一样。

示例：

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }  

<head>  
  <meta charset='UTF-8' />  
  <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>  
</head>  
<body>  
 <div id="header">  
  <div id="nav">  
   <a href="#contact">Contact</a> <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>  
  </div>  
 </div>  
</body>

- praaveen V R

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paullth · Accepted Answer

请查看http://www.css3.info/preview/web-fonts-with-font-face/了解更多信息。

以下是一个更大的示例，假设它们直接在“assets”目录下解决：

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

此外，为了让assets/fonts中的内容可用，我们使用以下配置：

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