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

【问题标题】：how to add a custom font to rails app如何将自定义字体添加到 Rails 应用程序
【发布时间】：2014-05-03 03:24:54
【问题描述】：

我已经阅读了几篇似乎涉及向 Rails 应用程序添加自定义字体的不同方面的帖子，但我很难将它们放在一起。

我有 .otf 字体文件，需要将这些字体合并到我的 CSS 中。

您似乎需要在 CSS 文件中添加以下内容？

我从How to add a custom font to Rails app?得到这个例子

任何想法我错过了什么？

我的应用程序/资产文件夹中有一个名为 MavenProLigh-200.otf 的文件

application.css.erb 文件

@font-face {
        font-family: 'maven';
        src:url('MavenProLight-300.otf');
        font-weight: normal;
        font-style: normal;
        }

development.rb 文件

  config.assets.enabled = true
   config.assets.paths << Rails.root.join("app", "assets", "fonts")

CSS

#body{
  color:#4e4f4f;
  font-family:'maven';

}

此代码有效

【问题讨论】：

标签： css ruby-on-rails

【解决方案1】：

@font-face 是一个 CSS 特性，与 Rails 没有任何关系。它将以与使用 url(path/to/image.jpg) 加载图像相同的方式加载字体。

font-family 内的@font-face 定义了您将用于设置字体的名称。与您设置Arial 或Verdana 完全相同。实际上@font-face 和您的选择器中的这一行将是相同的（例如a { font-family: 'Nokia Pure Headline'; }）。这就是将文件与字体名称联系起来的东西。

您可以定义许多@font-face 具有相同的字体名称但不同的字体文件，font-weight、font-style 等。这样您将连接字体文件和字体属性集。所以带有font-family: 'Nokia Pure Headline'; font-style: bold; 的样式将使用@font-face 中的文件，您将font-family 定义为'Nokia Pure Headline' 和font-style 作为bold;

【讨论】：

谢谢 - 从 CSS 的角度来看，我理解 font-family 是什么，但是我可以给它起任何我想要的名字吗？它根本不需要与 otf 文件有关吗？
是的，您可以使用任何您认为有用的名称。文件可以有任何名称，甚至每个url() 都不同，这并不重要，就像background-image 文件的名称不重要一样。请注意保留文件扩展名，以便服务器为浏览器生成正确的 mime-type 标头，以便正确解释字体文件。
这澄清了事情，但我仍然得到一个错误。请参阅上面的更新代码。
src() 定义 浏览器 的 url，而不是服务器上的路径。浏览器只能看到public 目录下的数据（默认情况下），它是数据根目录（例如/public/assets/img.png，因为 url 将是/assets/img.png。要为资产创建链接，您应该使用asset-url()，即 rails特征并形成资产的正确网址。
但是 rails 不会动态提供字体（作为样式和 java 脚本），对于 asset-url()，您应该使用 rake assets:precompile 自动将所有此类资产放在 public 下。

【解决方案2】：

只是回答你问题的第二部分

@font-face 代码会进入我的应用程序 CSS 文件吗？

Answer: 你可以将它添加到 application.css 文件中，这是你的选择。我会推荐你

创建一个 font.css 文件并将字体相关代码放在那里，然后在 application.css 中要求该 font.css 文件

【讨论】：