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

Question

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

它似乎对我不起作用.Rails控制台中的输出类似于:

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

Run Code Online (Sandbox Code Playgroud)

用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

Run Code Online (Sandbox Code Playgroud)

Answer 1

pau*_*lth 31

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

Run Code Online (Sandbox Code Playgroud)

对不起,我不知道

另外,对于资产管道的配置,我们使用的资产/字体的内容可用:

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

pra*_*een 25

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

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

转到http://www.fontsquirrel.com/
选择 - 网络字体生成器 - 选择字体u下载(从http://www.dafont.com下载解压缩文件).
检索字体文件
此站点将生成另一个zip,其中包含该字体样式所需的所有内容.
从该zip文件中解压缩并打开css,将css复制到你的html或css文件中
将字体添加到rails应用程序

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

配置/ application.rb中
```
 config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"  
```
Run Code Online (Sandbox Code Playgroud)

将其添加到视图中:

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

Run Code Online (Sandbox Code Playgroud)

我认为更好的做法是将它与其他与资产相关的配置一起放在 `config/initializers/assets` 中，使用以下语法：`Rails.application.config.assets.paths << Rails.root.join("/应用程序/资产/字体")` (2认同)

归档时间：	13 年，1 月前
查看次数：	29864 次
最近记录：	10 年，7 月前