如何在Rails 4中使用字体 [英] How to use fonts in Rails 4

问题描述

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

我跟随了很多关于这个的教程，不知何故，它只是不适合我的应用程序。

我正在使用 application.css.less 并进行如下声明：

  @ font-face {
 font-family：'HDVPeace'; 
 src：font-url（'HDV_Peace.eot'）; 
 src：font-url（'HDV_Peace.eot？iefix'）格式（'eot'），
 font-url（'HDV_Peace.woff'）格式（'woff'），
 font-url（'HDV_Peace.ttf'）格式（'truetype'），
 font-url（'HDV_Peace.svg＃webfont'）格式（'svg'）; 
 
 $ / code> 

注意：我试过使用 url（） 而不是 font-url（） 。前者在控制台上产生404错误，后者似乎根本没有做任何事情。在资源下的chrome开发工具中，字体文件不会出现在 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 
 | ----字体
 | ---- HDV_Peace.eot 
 | ---- HDV_Peace.svg 
 | ---- HDV_Peace.ttf 
 | ---- HDV_Peace.woff 
  
 
 
解决方案
  @ font-face 声明非常接近，你只是在url声明中缺少 / assets  p> 
 
 
  @ font-face {
 font-family：'HDVPeace'; 
 src：url（'/ assets / HDV_Peace.eot'）; 
 src：url（'/ assets / HDV_Peace.eot？iefix'）格式（'eot'），
 url（'/ assets / HDV_Peace.woff'）格式（'woff'），
 url（'/ assets / HDV_Peace.ttf'）格式（'truetype'），
 url（'/ assets / HDV_Peace.svg＃webfont'）format（'svg'）; 
 
 
 
 $ b 
任何添加到 assets.paths 可直接在开发和生产环境下的 / assets 路径下使用。您只需在 application.rb 中的资产路径修改行，在 development.rb 和 production.rb 只是多余的。 
 
 
另外，所有的字体格式基本上是二进制的。没有必要预编译它们，所以你可以安全地删除 assets.precompile 添加项。
 
 
 
是一个新鲜的Rails 4应用程序提供自定义字体。除了css中的font-face import语句以外，还增加了一个页面来显示其他内容： 
 
 
 https://github.com/sorentwo/font-example  
 
I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it's just not working for my application.

I am using application.css.less and have the following declaration:
@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');
}
Note: I have tried using url() instead of font-url() also. The former generates 404 errors on the console, where the latter just doesn't seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the assets folder, or anywhere

in my config/application.rb I have:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
And in both my config/environments/development.rb and config/environments/production.rb I have:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)
My font files are located at app/assets/fonts and are not contained in a folder below that...

What am I missing?

UPDATE:

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

解决方案
Your @font-face declaration is very close, you are just missing the /assets prefix within the url declaration.
@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');
}
Anything that has been added to assets.paths is available directly under the /assets path in both development and production. You only need the asset path modification line within application.rb, doing it again in development.rb and production.rb is just redundant.

Additionally, all of the font formats are essentially binary. There is no need to pre-compile them, so you can safely remove the assets.precompile addition.

Here is a fresh Rails 4 application serving custom fonts. Aside from the font-face import statement in the css and the addition of a page to display nothing else has been done to it: 

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

                        
这篇关于如何在Rails 4中使用字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！