解决 Next.js 中加载字体失败的问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Next.js 开发 web 应用时，如果在页面中使用自定义字体，有时候会出现加载字体失败的情况。这可能是由于 Next.js 默认的打包配置不支持字体文件的加载，导致浏览器无法正确加载字体文件。本文将介绍如何解决 Next.js 中加载字体失败的问题。

问题分析

Next.js 默认的打包配置不支持字体文件的加载，因此在页面中使用自定义字体时，需要手动配置 Next.js 的打包配置，以支持字体文件的加载。

解决方案

方案一：使用 next-fonts 插件

Next.js 提供了 next-fonts 插件，可以自动将字体文件打包到项目中，并配置好字体文件的加载方式。具体使用方法如下：

安装 next-fonts 插件：

npm install --save-dev next-fonts

在 next.config.js 中配置插件：

// javascriptcn.com 代码示例
// next.config.js

const withFonts = require('next-fonts');

module.exports = withFonts({
  webpack(config, options) {
    return config;
  }
});

在页面中引用字体文件：

// javascriptcn.com 代码示例
import '../styles/fonts.css';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1 className="title">Hello World</h1>
    </div>
  );
};

其中，../styles/fonts.css 是字体文件的样式文件，如下所示：

// javascriptcn.com 代码示例
@font-face {
  font-family: 'MyFont';
  src: url('../public/fonts/myfont.woff2') format('woff2'),
    url('../public/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.title {
  font-family: 'MyFont';
}

方案二：手动配置 next.config.js

如果不想使用 next-fonts 插件，也可以手动配置 next.config.js 文件，以支持字体文件的加载。具体配置如下：

// javascriptcn.com 代码示例
// next.config.js

module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'static/fonts',
          publicPath: '/_next/static/fonts'
        }
      }
    });

    return config;
  }
};

其中，file-loader 是一个可以将文件打包到项目中的 webpack loader，用于处理字体文件的加载。以上配置中，test 用于匹配字体文件的文件名，use 用于指定使用 file-loader 进行字体文件的加载。

在页面中使用自定义字体时，也需要手动引用字体文件的样式文件，如方案一中的 ../styles/fonts.css。

总结

通过以上两种方案，我们可以解决 Next.js 中加载字体失败的问题，使得自定义字体能够正确加载并显示在页面中。在使用 Next.js 进行 web 应用开发时，需要注意配置 webpack 的打包配置，以支持各种文件的加载。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657974ead2f5e1655d37de0e