我在我的RoR应用程序中使用了几种字体，但其格式主要是.ttf和.otf等格式。我将如何去嵌入这些文件在我的Rails应用程序？也就是说，一旦我将它们放入我的资产文件夹中，我的语法到底是嵌入到我的CSS和/或LESS文件中的语法？如何添加自定义字体到Rails应用程序？

编辑：这里是我的代码现在：

@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")

并检查与萤火虫的页面说：

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

来源

2012-09-08 tanookiben

结帐这个http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app – AnkitG

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

对不起，我没有k现在少

也为资产管道的配置有资产/字体下，我们提供的内容使用：

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

来源

2012-09-08 08:17:02 paullth

编辑：NVM我可以修复它！目前它适用于我，只要我拥有资产文件夹中的所有内容。将继续处理资产/文件夹中特定字体/文件夹中的字体 – tanookiben

添加自定义的字体使用谷歌的字体

为到Rails应用程序例如我使用雀斑
http://www.google.com/fonts#QuickUsePlace:quickUse/Family：
快速使用：雀斑

1.选择你想要的样式：
对页面加载时间的影响
提示：使用许多字体样式会减慢你的网页，所以只选择你实际需要在你的网页上的字体样式。

2.选择字符集你想：
提示：如果你只选择你需要的语言，就可以帮助防止您的网页缓慢。
拉丁（拉丁）
拉丁语扩展（拉丁语-EXT）

3.将此代码添加到您的网站：
说明：要嵌入您的收藏到您的网页，将代码复制作为第一要素在你的HTML文件中。
http://fonts.googleapis.com/css?family=Freckle+Face”的rel = '样式' 类型= '文本/ CSS'>

4.将字体到你的CSS：
Google Fonts API将生成必要的浏览器特定CSS以使用字体。你所需要做的就是将字体名称添加到你的CSS样式中。例如：

font-family: 'Freckle Face', cursive;

说明：将字体名称添加到您的CSS样式中，就像正常处理任何其他字体一样。

例子：

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; } 
    example : 
<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-29 09:39:34 praaveen

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

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

去http://www.fontsquirrel.com/
选择 - Web字体发电机 - 选择字体U下载（从http://www.dafont.com下载解压缩文件）。
检索字体文件
此网站将生成另一个zip文件，其中包含该字体样式所需的所有文件。
从该压缩，解压缩，开放的CSS，CSS复制到的那
你的HTML或CSS文件中的字体添加到您的Rails应用程序

（How to add a custom font to Rails app?）

的config/application.rb中
```
config.assets.enabled = true 
config.assets.paths << "#{Rails.root}/app/assets/fonts" 
```

将它添加到视图：

<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-29 09:44:10 praaveen

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

回答

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

相关问题