jsPDF fromHTML插件与自定义字体插件兼容问题求助

我之前也碰到过这个坑！问题出在fromHTML插件的字体处理逻辑上——它并不会自动继承你全局设置的自定义字体，哪怕你提前调用了setFont()，它在解析HTML内容时还是会默认 fallback 到标准字体。不过有几个办法可以解决这个问题：

方法一：直接在HTML元素中指定字体样式 #

最简单的方式是给要转换的HTML内容直接设置字体，让fromHTML解析时能识别并使用你的自定义字体：

<div id="pdf" style="font-family: CustomFont;">
  <!-- 这里放你要转换为PDF的内容 -->
</div>

只要你已经正确加载了自定义字体（addFileToVFS和addFont步骤没问题），这个方法基本能解决大部分场景的问题。

方法二：通过elementHandlers强制设置字体 #

如果不想修改HTML结构，可以在fromHTML的配置中，用elementHandlers给目标元素强制设置字体：

var pdf = new jsPDF('p', 'pt', 'letter'); 
pdf.addFileToVFS('CustomFont.tff', 'base64 of .tff file'); 
pdf.addFont('CustomFont.tff', 'CustomFont', 'normal'); 

var source = $('#pdf')[0]; 
var margins = { top: 50, bottom: 60, left: 40, width: 520 }; 

// 自定义元素处理器，处理目标容器时设置字体
var specialElementHandlers = {
  '#pdf': function(element, renderer) {
    // 在渲染该元素前切换到自定义字体
    pdf.setFont('CustomFont');
    return true; // 允许renderer继续处理子元素
  }
};

pdf.fromHTML( 
  source, 
  margins.left, 
  margins.top, 
  { 
    'width': margins.width, 
    'elementHandlers': specialElementHandlers,
    // 部分fromHTML版本支持直接配置全局字体
    'font': 'CustomFont' 
  }, 
  function (dispose) { 
    pdf.save('Test.pdf'); 
  }, 
  margins
);

这个方法的核心是在渲染目标HTML元素前，手动切换到自定义字体，确保后续子元素都使用该字体。

额外注意事项 #

• 确认字体的Base64编码没有错误：可以用在线工具验证一下编码后的内容是否能正常还原为字体文件。
• 字体名称要完全一致：addFont的第二个参数（字体名）必须和你在setFont、CSS中使用的名称完全匹配，大小写也要注意。
• 升级插件版本：如果用的是较旧的jsPDF或fromHTML插件，尝试升级到最新稳定版，新版本对自定义字体的兼容性更好。

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