ruby-on-rails - 在我的 Rails 应用程序中包含来自 font squirrel 的字体

Question

我在为我的 Rails 应用添加字体时遇到问题。我尝试遵循这篇文章的建议:Using fonts with Rails asset pipeline ，但我还是很困惑。

我正在尝试添加 this font .我制作了一个 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-face 元素的不同字体的所有代码。您提到您有几种字体未包含在您的 css 文件中——来自 front-squirrel 的渲染字体将在它们附带的 stylesheet.css 中包含相关代码

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