使用@ font-face和Rails 3.1应用程序？

Question

我使用以下@font-face声明无法使用我的Rails 3.1应用程序.我把资产管道的字体在其所谓的"字体"自己的文件夹一起images与stylesheets和javascripts

这是我使用的声明(由Font Squirrel生成.)

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('Chunkfive-webfont.eot');
  src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('Chunkfive-webfont.woff') format('woff'),
     url('Chunkfive-webfont.ttf') format('truetype'),
     url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

有人在他们的Rails 3.1应用程序上成功使用@ font-face吗？

更新

我刚刚阅读了这个主题http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/,它说url要font-url在声明中改变.不幸的是,这似乎没有用.

Answer 1

您必须将文件夹添加到资源路径(到文件config/application.rb),请参阅Rails指南

config.assets.paths << "#{Rails.root}/app/assets/fonts"

你应该使用asset_path帮手:

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

Answer 2

我知道这是一个老问题,但我只是偶然发现了rails 3.2这个问题,在阅读了之前发布的文档的链接后,没有必要编辑application.rb.我需要做的就是在我的样式表中执行以下操作(使用sass)

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

所以我没有使用url,而是使用了通用的asset-url,它接受了两个参数,即文件和资产类,在本例中为'font'.

Answer 3

从Rails 3.1及以上版本,您可以font-url直接致电.像这样:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: font-url('Chunkfive-webfont.eot');
  src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     font-url('Chunkfive-webfont.woff') format('woff'),
     font-url('Chunkfive-webfont.ttf') format('truetype'),
     font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

期待你的最终css看起来像那样:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(/assets/Chunkfive-webfont.eot);
  src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
     url(/assets/Chunkfive-webfont.woff) format('woff'),
     url(/assets/Chunkfive-webfont.ttf) format('truetype'),
     url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

通常工作:)

Answer 4

使用Rails 4.0(不知道这是否特定于4,但无论如何),我只能使它工作url(font_path('font-name.ttf')).无需将字体路径添加到资源路径(config.assets.paths << "#{Rails.root}/app/assets/fonts").

所以,对我来说这是有效的:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(font_path('Chunkfive-webfont.eot'));
  src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
     url(font_path('Chunkfive-webfont.woff')) format('woff'),
     url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
     url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
  font-weight: normal;
  font-style: normal;
}