Ruby-on-rails 向 Rails 4 添加自定义字体的官方方式？

Official way of adding custom fonts to Rails 4?

提问by Fellow Stranger

I'm researching how to add custom fonts to my Rails app, e.g. by adding a fontsfolder in the assets folder - and I cannot find an "official" Rails way on how to do this.

我正在研究如何向我的 Rails 应用程序添加自定义字体，例如通过fonts在资产文件夹中添加一个文件夹 - 我找不到关于如何执行此操作的“官方”Rails 方式。

Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?

是的，这里有很多关于这个问题的问题/答案，似乎都有自己的技巧。但是，这种常见的做法难道不应该遵循 Rails 著名的“约定优于配置”吗？

Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?

或者，如果我错过了 - 关于如何在 Rails 应用程序中组织字体的文档参考在哪里？

回答by Nikhil Nanjappa

Yes the link given will explain it well, however if u need another detailed explanation then here it is

是的，给出的链接会很好地解释它，但是如果你需要另一个详细的解释，那么这里是

• Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/and look for fonts

  Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)

• You can move the downloaded fonts to your app folder under app/assets/fonts/

• After downloading the file you need to "declare" the fonts you will be using in your css like this

  @font-face {
    font-family: "Kaushan Script Regular";
    src: url(/assets/KaushanScript-Regular.otf) format("truetype");
  }
  

• Finally you can use the font-family that you just declared wherever you want like this

  #e-registration {
    font-family: "Kaushan Script Regular";
  }
  

• 首先要在您的应用程序中使用自定义字体，您需要下载字体文件，您可以尝试https://www.1001freefonts.com/并查找字体

  少数最流行的字体文件格式主要是 .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)

• 您可以将下载的字体移动到 app/assets/fonts/ 下的应用文件夹中

• 下载文件后，您需要像这样“声明”您将在 css 中使用的字体

  @font-face {
    font-family: "Kaushan Script Regular";
    src: url(/assets/KaushanScript-Regular.otf) format("truetype");
  }
  

• 最后，您可以像这样在任何地方使用刚刚声明的字体系列

  #e-registration {
    font-family: "Kaushan Script Regular";
  }
  

Hope this helps.

希望这可以帮助。

回答by luigi7up

Just did it...

刚做了...

1. Download and save the font files (eot, woff, woff2...) in your assets/fonts/directory

   2. In your config/application.rbadd this line config.assets.paths << Rails.root.join("app", "assets", "fonts")

1. 将字体文件（eot、woff、woff2...）下载并保存在您的 assets/fonts/目录中

   2. 在你的config/application.rb添加这一行 config.assets.paths << Rails.root.join("app", "assets", "fonts")

What this does is it precompiles your fonts folder just as it does by default with your images, stylesheets etc.

它的作用是预编译您的字体文件夹，就像默认情况下对您的图像、样式表等所做的一样。

1. and make sure this line is set to trueconfig.assets.enabled = true

2. In your sass/scss or even inline with <script>tag

   @font-face {   font-family: 'Bariol Regular';   src:
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
   src:
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
   format('eot'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
   format('woff'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
   format('truetype'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
   format('svg');   font-weight: normal;   font-style: normal; }
   

3. 并确保这一行设置为trueconfig.assets.enabled = true

4. 在您的 sass/scss 中，甚至与<script>标签内联

   @font-face {   font-family: 'Bariol Regular';   src:
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
   src:
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
   format('eot'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
   format('woff'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
   format('truetype'),  
   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
   format('svg');   font-weight: normal;   font-style: normal; }
   

Note that you should use the font-urlhelper instead of css' urlto address the fingerprinting done by Rails when it precompiles the assets

请注意，您应该使用font-urlhelper 而不是 css'url来解决 Rails 在预编译资产时完成的指纹识别问题

Finally, set the font-family in your CSS files

最后，在 CSS 文件中设置 font-family

body {
   font-family: 'Bariol Regular', serif;
} 

FREE TIP: This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader

免费提示：话虽如此，就性能而言，最好的方法是使用 JS 进行设置，以便异步加载这些字体。检查这个加载器：https: //github.com/typekit/webfontloader

回答by Julie

I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:

我在上面列出的方法上遇到了一些麻烦，因为生产 css 没有指向编译的 ttf 字体，所以我成功地使用了这个从https://gist.github.com/anotheruiguy/7379570借来的替代方法：

1. Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.

2. I defined in a .scss file that we use:

   @font-face {
       font-family: 'Digital-7';
       src: asset-url('fonts/digital_7.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }
   

3. I leveraged the custom font in other .scss files:

   .digital-font {
       font-family: 'Digital-7', sans-serif;
       font-size: 40px;
   }
   

1. 将所有字体文件放在assets/stylesheets/fonts. 例如assets/stylesheets/fonts/digital_7.ttf。

2. 我在我们使用的 .scss 文件中定义：

   @font-face {
       font-family: 'Digital-7';
       src: asset-url('fonts/digital_7.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }
   

3. 我利用了其他 .scss 文件中的自定义字体：

   .digital-font {
       font-family: 'Digital-7', sans-serif;
       font-size: 40px;
   }
   

---

---

This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.

这就是说，一种更简洁的方法是将字体定义（在本例中为 digital_7_mono.ttf）放在单独的站点上。

If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)

如果您正在使用 Cloudfront，例如，在名为 的 Cloudfront 目录中my_path，上传您的字体文件，然后定义一个 css 文件（例如digital_fonts.css）

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

In your html, inside the <head>tag, add:

在您的 html<head>标签内，添加：

回答by rld

The only way that worked for me was this:

对我有用的唯一方法是：

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}