ruby-on-rails - 如何在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。在我看来，这绝对像是配置问题，但我不知道。任何帮助将非常感激。

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”更改为带有摘要的文件名。

我个人不喜欢将字体放在 Assets 管道上，因为它们可能不会更改，只会减慢您的预编译时间，因此我将它们公开发布:

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

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

(这与webpack或webpacker无关)