如何在带有 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当然不存在并且是 404。这对我来说绝对是一个配置问题，但我不知道在哪里。任何帮助将非常感激。

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')

这样，链轮会将“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

旁注：您可能会遇到 update 的建议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来简化为您的字体指定替代格式。