如何在Rails 6中使用Webpack自定义字体？

Question

我新开始的 Rails 6 应用程序需要一组自定义字体。我的设置如下：

# app/assets/stylesheets/my-font.sass

@font-face
  font-family: 'my-font'
  src: url('fonts/my-font.eot') format('embedded-opentype'), url('fonts/my-font.woff') format('woff'), url('fonts/my-font.ttf') format('truetype'), url('fonts/my-font.svg#my-font') format('svg')
  font-weight: 400
  font-style: normal

然后在 app/assets/stylesheets/fonts 下，我有sass文件中引用的所有4个文件。

我的 application.sass 有以下导入代码: @import 'my-font'。

当我运行 rails assets:precompile 时，它还会将具有后缀版本的所有4个文件（例如my-font-7384658374658237465837246587263458.eot）放在 public 目录中。

但是，当我运行应用程序时，浏览器正在寻找根目录中的名为 my-font.eot 的文件，这显然不存在并返回404。 对我来说，这绝对像是配置问题，但我不知道在哪里。任何帮助将不胜感激。

- Severin

---

要明确的是，这不是使用webpacker而是使用Sprockets。 - mr rogers

Answer 1

如果您的字体文件位于 /assets/ 目录下，则可以使用 asset-url 助手。

src: asset-url('fonts/my-font.eot') format('embedded-opentype'),
     asset-url('fonts/my-font.woff') format('woff'),
     asset-url('fonts/my-font.ttf') format('truetype'),
     asset-url('fonts/my-font.svg#my-font') format('svg')

这样Sprockets将把“fonts/my-font.xxx”更改为包含摘要信息的文件名。

个人而言，我不喜欢将字体放在资产管道中，因为它们可能不会改变，并且只会减慢预编译时间，所以我将它们放在public目录下：

/public/fonts/my-font.eot
/public/fonts/my-font.woff
...ect...

只需使用您原始的 CSS 代码即可。

（这与 webpack 或 webpacker 无关）

- arieljuod

---

非常感谢。问题已经解决了！ - Severin

的确，预编译很少更改的字体文件可能是过度工程化的事情，但是Sprockets还会创建每个资产的gzipped版本，如果浏览器支持，则可以提供压缩文件。通过将文件放置在“public”而不是依赖于资产预编译，您会失去这种速度提升。 WOFF文件是经过设计压缩的，但是TTF，OTF和EOT可能会比较大。 - Goulven

什么是Webpacker解决方案？ - user3630282

嘿@LuisFlores，我上个月写了一篇关于这个的文章，其中包括使用webpacker解决字体问题的方法。https://www.ombulabs.com/blog/learning/webpacker/webpack-all-the-assets.html - arieljuod

Answer 2

1. 将字体文件添加到app/assets/fonts文件夹中。

2. 现在您需要告诉Sprockets首先加载字体。为此，只需将

   //= link_tree ../fonts添加到app/assets/config/manifest.js中。

注意：您可能会遇到更新initializers/assets.rb的建议，但这已过时，Sprockets 4希望您将指令添加到manifest.js中来加载字体。

3. 您需要定义用于应用程序的font-face，您的意图是正确的，但需要使用font-url而不是url才能正常工作，因此

src: font-url('my-font.eot') format('embedded-opentype') ...

请注意，您不需要指定fonts目录，因为font-url已经默认包括它。

奖励：您可以使用此sass mixin来简化指定字体的其他格式。

- Andrew Rozhenko

---

哦，谢谢你。有一个更正：将字体文件移动到样式表文件夹之外。 - nateM