如何使用 Webpack 在 Rails6 中使用自定义字体

Question

对于我刚开始的Rails6 应用程序，我想要一套自定义字体。我的设置如下所示：

# 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:

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

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

（这与webpack或webpacker无关）

Answer 2

将您的字体添加到 app/assets/fonts 文件夹。
现在您首先需要告诉 Sprockets 加载字体。为此，只需添加

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

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

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

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

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

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

如何使用 Webpack 在 Rails6 中使用自定义字体

How to use custom fonts in Rails 6 with Webpack

ruby-on-rails

rails-sprockets

ruby-on-rails-6