在我的 rails 应用程序中包括来自字体松鼠的字体

Question

我在为我的rails应用程序包含字体时遇到问题。 我尝试遵循这篇文章中的建议：在 Rails 资产管道中使用字体，但我仍然感到困惑。

我正在尝试添加此字体。我创建了一个app/assets/fonts文件夹并向其添加了字体。我相应地更改了production.rb。

我对这样声明我的字体感到困惑：

@font-face {
  font-family: 'Icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
    url('icomoon.svg#icomoon') format('svg'),
    url('icomoon.woff') format('woff'),
    url('icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这些是我的 4 种 RobotoSlab 字体：

• RobotoSlab-Bold.ttf
• RobotoSlab-Light.ttf
• RobotoSlab-Regular.ttf
• RobotoSlab-Thin.ttf

它们的名称中都有破折号。 那么我写什么而不是iconmoon.eot？ RobotoSlab-Regular.ttf还是RobotoSlab.ttf？

另外，我对我应该在哪里解决.eot部分以及我应该在哪里解决.ttf部分感到困惑。 在上面的示例中，首先处理了.eot部分，然后解决了.ttf部分以及所有其他格式。 但是我的字体的默认扩展名是 .ttf ，所以这会改变事情吗？

另外，我对应该包含哪些字体文件感到困惑。 http://www.fontsquirrel.com/上的大多数字体都有多个字体文件可供下载（以解决粗体和斜体的变化）。 你应该在@font-face链接到所有这些吗？

感谢您的帮助。

Answer 1

有很多事情可能是一个问题：

---

您的字体文件实际存储在哪里？

如果它们在 /assets/fonts 中，则需要直接引用该路径：

@font-face {
  font-family: 'Icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

---

你用过Font-Squirrel的stylesheet.css吗？

Stylesheet.css拥有您刚刚转换为@font面元素的不同字体的所有代码。您提到您有几种字体未包含在您的 css 文件中 - 来自 front-squirrel 的渲染字体将包含包含在它们附带的stylesheet.css中的相关代码

您只需要将样式表中的引用更改为您自己的应用程序，并将代码包含在您自己的.css文件中