如何使用 @rails/webpacker 加载本地字体？答案

【问题标题】：How do I load local fonts with @rails/webpacker?如何使用 @rails/webpacker 加载本地字体？
【发布时间】：2020-03-01 07:33:19
【问题描述】：

我在使用 @rails/webpacker 加载本地字体文件时遇到问题。字体是在开发环境中加载的，而不是在生产环境中加载的。这似乎是一个非常简单的问题，但我遇到了很多麻烦。下面是我的@font-face 代码。我的字体存储在 app/assets/images/fonts 中

app > assets > stylesheets >config > _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

在生产模式下获取字体文件会导致 404 错误。当我预编译资产时，我可以看到字体文件的文件名附加了一个哈希。在交付给浏览器的 css 文件中，字体文件的 url 保持不变。为了解决这个问题，我尝试在环境模块规则中使用 file-loader、url-loader 和 resolve-url-loader，但无济于事。下面是我在 webpack 配置文件中的尝试。

配置 > webpack > environment.js

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
);

environment.module = {
  rules: [
    {
      test: /\.(scss|sass|css)$/i,
      use: [
        { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
        { loader: 'postcss-loader', options: { sourceMap: true } },
        'resolve-url-loader',
        { loader: 'sass-loader', options: { sourceMap: true } }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          limit: '100000'
        }
      ],
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'url-loader',
          limit: '100000'
        }
      ]
    }
  ]
};

module.exports = environment;

任何帮助将不胜感激:)

【问题讨论】：

你可以试试这两种解决方案吗：makandracards.com/makandra/…
字体是否需要经过资产管道？他们肯定不会定期更改，因此他们不能住在public 目录中吗？
@olvado 是的，你完全正确，谢谢。他们应该住在公共目录中。我是网络开发的新手，所以谢谢！

标签： ruby-on-rails font-face webpacker postcss-loader

【解决方案1】：

我正在使用 Rails 6.0.3 并且必须执行以下操作才能使用自定义字体：

创建一个字体文件夹：app/javascript/application/fonts 并将我的字体放在那里（miso-bold.ttf 和 miso-bold.otf）

在app/javascript/application/app.scss 或您的主要.scss 文件中，我放置了以下内容：

@font-face {
  font-family: "Miso";
  src: url("./fonts/miso-bold.ttf") format("truetype"), url("./fonts/miso-bold.otf") format("opentype");
}

然后您可以在任何.css 中使用它：
```
.someclass {
  font-family: "Miso";
}
```

值得注意的是，Webpacker 应该配置为包含字体文件（.otf 和 .ttf 最常见）。检查webpacker.yml。

【讨论】：