如何在 @rails/webpacker 中加载本地字体？

Question

我在使用@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配置文件中的尝试。

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;

任何帮助都将不胜感激 :)

- einar_j

---

你可以尝试这两个解决方案：https://makandracards.com/makandra/66853-using-local-fonts-with-webpack-webpacker - Nezir

字体需要通过资产管道吗？毕竟它们不会经常更改，因此它们不能存储在“public”目录中吗？ - olvado

@olvado 是的，你说得完全正确，谢谢。它们应该存放在公共目录中。我对Web开发非常陌生，所以谢谢！ - einar_j

Answer 1

我正在使用Rails 6.0.3，为了使用自定义字体，我必须执行以下操作：

1. Create a fonts folder: app/javascript/application/fonts and placed my fonts there (miso-bold.ttf and miso-bold.otf)

2. In app/javascript/application/app.scss or your main .scss file, I placed the following:

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

3. In any .css you can then use it:

   .someclass {
     font-family: "Miso";
   }
   

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

- Santiago Martí Olbrich