使用jsPDF doc.html时如何实现多字体（含自定义字体）生效？

完全可行，核心是解决jsPDF渲染时的字体回退识别问题，以下是具体步骤：

• 正确注册自定义字体到jsPDF
  在调用doc.html()之前，必须确保自定义字体已被jsPDF识别，使用addFont()方法完成注册：

  const doc = new jsPDF();
  // 注册自定义字体，参数依次为字体文件路径、字体名、样式
  doc.addFont('myFont.ttf', 'myFont', 'normal');
  

• 用CSS unicode-range划分字体负责范围
  问题根源是渲染引擎优先匹配系统字体Helvetica后，不会再触发自定义字体的加载。通过unicode-range明确指定两种字体的字符覆盖范围，让渲染引擎精准匹配：

  /* 目标容器的字体回退规则 */
  #to-pdf {
    font-family: Helvetica, myFont;
  }
  
  /* 限制Helvetica仅处理英文等ASCII字符 */
  @font-face {
    font-family: 'Helvetica';
    src: local('Helvetica');
    unicode-range: U+0000-007F; /* 覆盖基本ASCII字符集 */
  }
  
  /* 指定自定义字体处理非ASCII的其他语言字符 */
  @font-face {
    font-family: 'myFont';
    src: url('myFont.ttf') format('truetype');
    unicode-range: U+0080-FFFF; /* 覆盖所有非ASCII字符 */
  }
  

• 预加载自定义字体再渲染PDF
  部分场景下，浏览器可能未完成自定义字体加载就触发PDF渲染，导致字体不生效。可以通过FontFace API预加载字体后再执行渲染：

  // 预加载自定义字体
  const customFont = new FontFace('myFont', 'url(myFont.ttf)');
  customFont.load().then(() => {
    document.fonts.add(customFont);
    // 字体加载完成后生成PDF
    const doc = new jsPDF();
    doc.html(document.getElementById('to-pdf'), {
      callback: (pdf) => {
        pdf.save('result.pdf');
      }
    });
  });
  

• 检查html2canvas配置（若使用）
  如果jsPDF依赖html2canvas渲染HTML，确保配置开启字体支持：

  doc.html(document.getElementById('to-pdf'), {
    html2canvas: {
      useCORS: true,
      allowTaint: true
    },
    callback: (pdf) => pdf.save('result.pdf')
  });
  

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