10

对于我新启动的 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。这对我来说绝对是一个配置问题，但我不知道在哪里。任何帮助将非常感激。

4

2 回答 2

18

如果里面有字体，请/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 无关）

于 2019-08-21T13:26:22.580 回答
16

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

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

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

旁注：您可能会遇到 update 的建议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已经暗示了它。

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

于 2020-04-30T06:10:54.010 回答