如何在Rails 4中使用字体

Question

我有一个Rails 4应用程序,我正在尝试使用自定义字体.

我已经关注了很多关于这方面的教程,不知何故它只是不适用于我的应用程序.

我正在使用application.css.less并有以下声明:

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

注意:我尝试过使用 url() 而不是 font-url() .前者在控制台上生成404错误,后者似乎根本不做任何事情.在资源下的chrome dev工具中,字体文件不会出现在 文件夹下assets 或任何位置

在我的config/application.rb身上:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

在我config/environments/development.rb和config/environments/production.rb我都有:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

我的字体文件位于app/assets/fonts以下文件夹中,并且不包含在...

我错过了什么？

更新:

文件夹结构

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

Answer 1

您的@font-face声明非常接近,您只是错过/assets了网址声明中的前缀.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

添加的任何内容assets.paths都可直接在/assets开发和生产的路径下使用.您只需要内部的资产路径修改行application.rb,再次执行它development.rb并且production.rb只是冗余.

此外,所有字体格式基本上都是二进制的.无需预编译它们,因此您可以安全地删除assets.precompile添加内容.

这是一个新的Rails 4应用程序,提供自定义字体.除了css中的font-face import语句和添加一个页面以显示没有其他内容已经完成:

https://github.com/sorentwo/font-example

Answer 2

在Rails 4中,有一个帮助器来设置字体的路径.

如果你有/ assets/fonts或vendor/assets/fonts中的字体,Rails 4会找到它们!要利用这一点,在Bootstrap CSS文件中将@font_face调用更改为

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

请注意,字体文件前面没有文件夹规范.这是由铁轨助手完成的.

Answer 3

请勿对您的字体目录进行硬编码,因为该位置是动态的.

就像有图像的内置助手一样,还有内置的字体助手:http: //api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

例:

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

Answer 4

这对我来说适用于Rails 4.1应用程序.

1. 在`app/assets/fonts`下添加字体
2. 从`.css.scss`文件中调用它们,如下所示:

@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 5

创建app/assets/fonts目录后重新启动'rails server'

Answer 6

我发现这篇文章解决了我所有的问题.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/