使用@react-pdf/renderer与pdf-lib时多语言PDF渲染及复制问题求助

字体选择核心原则 #

放弃Helvetica、Roboto这类仅支持拉丁系的字体，直接用Google Noto系列的完整字体文件（拒绝子集化版本），它原生覆盖中日韩、阿拉伯语、印地语等绝大多数复杂脚本，且能保证字形准确和Unicode编码映射完整。

推荐组合（配置一次即可自动适配）：

• Noto Sans：基础覆盖英语及拉丁系语言
• Noto Sans CJK SC/TC/JP/KR：覆盖中日韩汉字、谚文、假名
• Noto Sans Arabic：支持阿拉伯语从右到左排版及连写字符
• Noto Sans Devanagari：适配印地语等梵语系文字

@react-pdf/renderer 快速配置 #

1. 下载上述字体的完整OTF/TTF文件，放到项目静态资源目录（如public/fonts）
2. 在PDF初始化代码中注册字体链，利用unicodeRange自动匹配字符：

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

Font.register({
  family: 'Noto Sans',
  fonts: [
    { src: '/fonts/NotoSans-Regular.ttf' },
    { src: '/fonts/NotoSansCJKsc-Regular.otf', unicodeRange: 'U+4E00-9FFF, U+3040-30FF, U+AC00-D7AF' },
    { src: '/fonts/NotoSansArabic-Regular.ttf', unicodeRange: 'U+0600-06FF, U+0750-077F' },
    { src: '/fonts/NotoSansDevanagari-Regular.ttf', unicodeRange: 'U+0900-097F' },
  ],
});

3. 所有PDF文本组件统一设置fontFamily: 'Noto Sans'，框架会自动根据字符编码选择对应字体，无需手动拆分文本。

解决复制乱码问题 #

• 绝对不要用子集化字体：很多CDN或在线字体库提供的Noto是子集压缩版，会丢失非拉丁字符的Unicode映射，必须下载完整字体文件
• 注册字体时禁用子集化：不要加subset: true参数，确保完整字体嵌入PDF
• pdf-lib处理PDF时，同样要保证字体完整嵌入，避免仅嵌入字形数据

关键注意事项 #

• 后端返回的文本必须是标准UTF-8编码，避免转义或编码错误导致字符识别失败
• @react-pdf/renderer v3+ 已原生支持阿拉伯语等从右到左语言的自动排版，无需额外插件
• 测试时覆盖特殊字符：比如韩语复合谚文、印地语连体字、阿拉伯语连写字符，验证渲染和复制功能

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