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

Question

提问by tanookiben

I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?

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

EDIT: Here's the code I have for now:

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

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

It doesn't seem to be working for me. The output in the Rails console is something along the lines of:

它似乎对我不起作用。Rails 控制台中的输出类似于以下内容：

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

And examining the page with Firebug says:

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

Answer 1

回答by paullth

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

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

Larger example, assuming they're resolved directly under the assets dir

更大的例子，假设它们直接在 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;
}

Im sorry I dont know LESS

对不起，我不知道 LESS

Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:

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

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

Answer 2

回答by praaveen

Adding a custom font to Rails application

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

Select font type and download
for example
go to http://www.dafont.com
select font and download font
Generate font files
go to http://www.fontsquirrel.com/
select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).
Retrieve the font files
This site will generate another zip which contain all required for that font style.
From that zip, unzip and open css, copy css into your html or css file of that

Add the font to your rails app

(How to add a custom font to Rails app?)

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>

选择字体类型和下载
例如
去http://www.dafont.com
选择字体和下载字体
生成字体文件
转到http://www.fontsquirrel.com/
选择 - Web 字体生成器 - 选择字体 u 下载（从http://www.dafont.com下载的解压缩文件）。
检索字体文件
此站点将生成另一个 zip，其中包含该字体样式所需的所有内容。
从那个 zip，解压并打开 css，将 css 复制到你的 html 或 css 文件中
将字体添加到 Rails 应用程序
（如何向 Rails 应用程序添加自定义字体？）
配置/应用程序.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>

Answer 3

回答by praaveen

add a custom font to Rails application by using google fonts

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

for example i am using Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Quick Use: Freckle Face

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

1. Choose the styles you want:
Impact on page load time
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

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

2. Choose the character sets you want:
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Latin (latin)
Latin Extended (latin-ext)

2. 选择您想要的字符集：
提示：如果您只选择您需要的语言，您将有助于防止网页运行缓慢。
拉丁语 (latin)
拉丁语扩展 (latin-ext)

3. Add this code to your website:
Instructions: To embed your Collection into your web page, copy the code as the first element in the of your HTML document.
http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>

3. 将此代码添加到您的网站：
说明：要将您的收藏夹嵌入您的网页，请将该代码复制为 HTML 文档中的第一个元素。
http://fonts.googleapis.com/css?family=Freckle+Face'rel='stylesheet' type='text/css'>

4. Integrate the fonts into your CSS:
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

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

 font-family: 'Freckle Face', cursive;

Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.

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

Example:

例子：

 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>

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

提问by tanookiben

回答by paullth

回答by praaveen

Adding a custom font to Rails application

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

回答by praaveen

相关推荐

最近更新

标签

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

提问by tanookiben

回答by paullth

回答by praaveen

Adding a custom font to Rails application

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

回答by praaveen

相关推荐

CSS 如何更改悬停时文本链接的背景颜色而不是图像链接

CSS 媒体查询可以根据 div 元素而不是屏幕调整大小吗？

CSS 在打印模式下重复表头

CSS 如何设置 Font Awesome Icons 的图标颜色、大小和阴影样式

相关推荐

最近更新

标签