Question

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

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

看来你需要在CSS文件中沿着下面的行添加一些内容吗？

我从How to add a custom font to Rails app?

得到了这个例子

我缺少什么想法？

我的app / assets文件夹中有一个名为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';

}

此代码有效

Answer 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 {{1}}的文件;

Answer 2

回答你问题的第二部分

@ font-face代码会在我的应用程序CSS文件中出现吗？

答案：您可以将它添加到application.css文件中，这是您的选择。我建议你

创建一个font.css文件并在其中放入与字体相关的代码，然后在application.css中要求font.css文件

如何将自定义字体添加到rails应用程序

2 个答案: