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

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 的文件，该文件当然不存在，而且是 404s。这对我来说绝对是一个配置问题，但我不知道在哪里。任何帮助将不胜感激。

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/fonts/my-font.eot
/public/fonts/my-font.woff
...ect...

只需使用您的原始 css 代码。

（这与webpack或webpacker无关）

Answer 2

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

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

   //= link_tree ../fonts 到 app/assets/config/manifest.js

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

1. 您需要定义font-face 以在您的应用程序中使用，并且您的意图是正确的，但您需要使用font-url 而不是url 才能使其工作，所以

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

请注意，您不需要指定fonts 目录，因为font-url 已经暗示了它。

奖励：您可以使用this sass mixin 简化为您的字体指定替代格式的过程。