react-pdf设置Courier字体无效，寻求解决方法

直接指定系统字体名在@react-pdf/renderer中往往无法生效，哪怕是Courier这类系统自带字体，必须先通过Font.register完成字体注册，本地导入字体也需要遵循正确的注册流程。以下是具体解决步骤：

方法1：注册系统Courier字体 #

在组件代码执行前，先注册系统字体：

import { Font } from '@react-pdf/renderer';

// 注册系统Courier字体
Font.register({
  family: 'Courier',
  src: 'Courier', // 部分环境下直接填写系统字体名即可生效
});

方法2：使用本地Courier字体文件 #

如果系统注册方式无效，尝试导入本地字体文件：

1. 将Courier字体文件（比如Courier.ttf）放到项目的assets/fonts目录下
2. 在代码中注册该字体：

import { Font } from '@react-pdf/renderer';
import CourierFont from './assets/fonts/Courier.ttf';

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

修正后的完整代码示例 #

import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';
import CourierFont from './assets/fonts/Courier.ttf'; // 若用系统字体可删除此行，改用系统注册方式

// 字体注册必须在组件渲染前执行
Font.register({
  family: 'Courier',
  src: CourierFont, // 系统字体替换为 src: "Courier"
});

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Courier',
    fontSize: 14, // 增加字号便于验证字体效果
    fontWeight: 'normal', // 明确字体权重，避免变体不匹配
  }
});

const MakePDF = () => {
  return (
    <Document>
      <Page size="A4">
        <View>
          <Text style={styles.text}>test</Text>
        </View>
      </Page>
    </Document>
  )
}

export default MakePDF; // 注意导出名需与组件名一致，原代码中ExportPDF为笔误

额外排查点 #

• 确保Font.register中的family值与样式里的fontFamily完全一致，大小写敏感
• React Native环境下，需在metro.config.js中添加字体文件扩展名配置：

module.exports = {
  resolver: {
    assetExts: ['ttf', 'otf'],
  },
};

• 若使用本地字体，确认文件路径正确，且打包工具能正确识别该资源
• 尝试重启开发服务器，清除缓存后重新构建

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