Css 如何向rails应用程序添加自定义字体

我读过几篇文章，这些文章似乎涉及到在rails应用程序中添加自定义字体的不同方面，但我很难把它们全部放在一起

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

看起来您需要在CSS文件中添加以下内容

这个例子是我从

你知道我遗漏了什么吗

我的app/assets文件夹中有一个名为MavenProLigh-200.otf的文件

application.css.erb文件

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

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

development.rb文件

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

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

}

---

这段代码有效

@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-face

中的文件，您将

字体系列

定义为

'Nokia Pure Headline'

，将

字体样式

定义为

粗体

回答你问题的第二部分

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

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

---

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

谢谢-我从css的角度理解什么是字体系列，但在这里我可以给它起任何我想要的名字吗？它根本不必与otf文件相关，是吗？是的，你可以使用任何你觉得有用的名字。文件可以有任何名称，甚至每个

url（）

都有不同的名称，这与

背景图像的名称无关。注意保留文件扩展名，让服务器为浏览器创建正确的mime类型头，这样字体文件将被正确解释。这澄清了问题，但我仍然得到了一个错误。请参阅上面更新的代码。
src（）
定义浏览器的url，而不是服务器上的路径。浏览器只能看到
public
目录下的数据（默认情况下），该目录是数据根目录（例如
/public/assets/img.png
，因为url将是
/assets/img.png
。要创建资产链接，应使用
asset-url（）
这是rails的一项功能，它构成了资源的正确url。但是rails不动态提供字体（作为样式和javаa脚本），使用
asset-url（）
您应该执行
rake assets:precompile
来自动将所有此类资源置于
公共
下。