NextJS中react-pdf的Font.register注册自定义字体失败求助

问题原因 #

Create React App默认配置了处理字体文件的webpack loader，而NextJS的默认webpack配置未包含TTF字体的处理规则，导致无法解析字体文件。

解决方法 #

方法一：利用NextJS公共目录（简单快捷） #

1. 将Prometo-Regular.ttf字体文件移动到项目根目录的public/fonts文件夹下（没有则新建）
2. 修改字体注册代码，直接使用public目录下的绝对路径：

// 无需导入字体文件，直接用public路径注册
Font.register({
  family: 'PrometoRegular',
  src: '/fonts/Prometo-Regular.ttf'
});

3. 样式代码保持不变：

const styles = StyleSheet.create({
  subtitle: {
    fontFamily: 'PrometoRegular',
    fontSize: 20,
    marginBottom: 10
  },
})

方法二：配置webpack处理TTF字体文件 #

1. 在项目根目录的next.config.js中添加webpack规则，让NextJS能解析TTF文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 添加TTF字体处理规则
    config.module.rules.push({
      test: /\.(ttf)$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/fonts/[name].[hash][ext]'
      }
    });
    return config;
  }
};

module.exports = nextConfig;

2. 之后就可以像原React项目中的方式导入并注册字体：

import PrometoRegular from '../../assets/fonts/Prometo-Regular.ttf';

Font.register({family: 'PrometoRegular', src: PrometoRegular });

3. 样式代码保持不变即可。

内容的提问来源于stack exchange，提问作者Gery