@react-pdf/renderer中本地字体加载失败问题求助

我在为PDF项目加载本地字体时遇到错误（见上图）。我已经按照官方文档尝试了多种字体导入方式，相关代码如下：

导入字体：

import DinPro from "../../../../assets/fonts/DinProFont/DINPro-Medium_13936.ttf";

注册字体：

Font.register({
  family: "DINPro",
  format: "truetype",
  src: DinPro,
  fontStyle: "normal",
  fontWeight: "normal"
});

使用的依赖版本：

"@react-pdf/renderer": "^3.0.1",

解决办法： #

• 核对字体文件路径：确认相对路径的层级、文件名大小写完全匹配，尤其是在非Windows系统中，大小写敏感会导致路径识别失败。
• 配置打包工具处理字体文件：如果用webpack，需添加字体文件的解析规则，确保导入的路径能被正确处理：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
};

• 改用绝对路径：通过path.resolve生成绝对路径，避免相对路径层级出错：

import path from 'path';

Font.register({
  family: "DINPro",
  format: "truetype",
  src: path.resolve(__dirname, '../../../../assets/fonts/DinProFont/DINPro-Medium_13936.ttf'),
  fontStyle: "normal",
  fontWeight: "normal"
});

• 排查字体文件：换一个确认可用的TTF字体测试，排除原字体文件损坏的可能。
• 测试版本兼容性：若上述方法无效，可尝试将@react-pdf/renderer降级到2.x版本，验证是否为新版本的兼容性问题。

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