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

我有一些我想在我的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 

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

对不起,我不知道

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

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

将自定义字体添加到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应用程序? )

    配置/ application.rb中

      config.assets.enabled = true config.assets.paths << "#{Rails.root}/app/assets/fonts" 
  5. 将其添加到视图中:

          

    sample text

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

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

1.选择您想要的样式:
对页面加载时间的影响
提示:使用多种字体样式会降低网页速度,因此只需选择网页上实际需要的字体样式。

2.选择所需的字符集:
提示:如果您只选择所需的语言,则有助于防止网页速度变慢。
拉丁语(拉丁语)
拉丁语扩展(拉丁语扩展)

3.将此代码添加到您的网站:
说明:要将您的Collection嵌入到您的网页中,请将代码复制为HTML文档中的第一个元素。
http://fonts.googleapis.com/css?family=Freckle+Face'rel =’样式表’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; } example :