24

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

3 回答 3

32

结帐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

同样对于资产管道的配置，我们使用以下可用的资产/字体的内容：

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
于 2012-09-08T08:17:02.790 回答
25

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

  1. 选择字体类型并下载
    例如
    去http://www.dafont.com
    选择字体并下载字体

  2. 生成字体文件

    转到http://www.fontsquirrel.com/
    选择 - 网络字体生成器 - 选择字体 u 下载（从http://www.dafont.com下载的解压缩文件）。

  3. 检索字体文件
    此站点将生成另一个 zip，其中包含该字体样式所需的所有内容。
    从那个 zip，解压缩并打开 css，将 css 复制到你的 html 或 css 文件中

  4. 将字体添加到您的 rails 应用程序

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

    配置/应用程序.rb 

     config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"

  5. 将其添加到视图中：

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

于 2014-01-29T09:44:10.447 回答
2

使用 google 字体向 Rails 应用程序添加自定义字体

例如我正在使用雀斑脸
http://www.google.com/fonts#QuickUsePlace:quickUse/Family：
快速使用：雀斑脸

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>
于 2014-01-29T09:39:34.617 回答