如何为jsPDF添加不支持中文的自定义字体的中文回退方案

你的自定义字体custom-sans不支持中文显示，要实现中文自动用回退字体渲染，可以按以下步骤操作：

• 第一步：添加支持中文的回退字体
  把支持中文的字体（比如思源黑体、微软雅黑等）也添加到jsPDF的虚拟文件系统中，操作和添加自定义字体一致：

  // 假设你已获取到中文字体的二进制数据，例如source-han-sans-normal.ttf对应的内容
  doc.addFileToVFS('source-han-sans-normal.ttf', chineseFontData);
  doc.addFont('source-han-sans-normal.ttf', 'chinese-sans', 'normal');
  

• 第二步：编写文本处理逻辑，自动切换字体
  写一个工具函数，判断文本是否包含中文字符，再根据结果切换字体后渲染：

  function addTextWithFallback(doc, text, x, y) {
    // 用正则匹配中文字符
    const hasChinese = /[\u4e00-\u9fa5]/.test(text);
    if (hasChinese) {
      // 包含中文，切换到中文回退字体
      doc.setFont('chinese-sans', 'normal');
    } else {
      // 无中文，使用自定义字体
      doc.setFont('custom-sans', 'normal');
    }
    doc.text(text, x, y);
  }
  

• 第三步：替换原有的文本渲染方式
  之后渲染文本时，用上面的工具函数代替直接调用doc.text()：

  // 你的原有自定义字体加载代码
  doc.addFileToVFS('custom-sans-normal.ttf', customSansFont);
  doc.addFont('custom-sans-normal.ttf', 'custom-sans', 'normal');
  
  // 加载中文回退字体
  doc.addFileToVFS('source-han-sans-normal.ttf', chineseFontData);
  doc.addFont('source-han-sans-normal.ttf', 'chinese-sans', 'normal');
  
  // 使用工具函数添加文本
  addTextWithFallback(doc, "这是中文内容", 10, 10);
  addTextWithFallback(doc, "This is English text", 10, 30);
  

如果遇到中英文混合的文本，上面的方法会把整段文本切换到中文字体。要是需要精准拆分中英文片段分别渲染，可以把文本拆分为纯中文、纯非中文的片段，逐个设置对应字体后依次输出。

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