如何使用html方法修复jsPDF中自定义字体的错误字母间距

Question

我正在使用 .html 方法将 html 转换为 pdf，如下所示：

 doc.html(content, {
  callback: () => {
    resolve(doc);
  },
  html2canvas: {
    scale,
    logging: true,
    letterRendering: 1,
    allowTaint: true,
    useCORS: true,
  },
  dompurify,
  margin: 0,
  fontFaces,
});

fontFaces 被定义为一个数组或像这样的对象（使用谷歌字体）：

{
  family: 'Balsamiq-Sans', weight: 'normal', stretch: 'normal',
  src: [{ url: 'http://fonts.gstatic.com/s/balsamiqsans/v3/P5sEzZiAbNrN8SB3lQQX7Pnc8dkdIYdNHzs.ttf', format: 'truetype' }],
}

在我要渲染的html元素中，添加一个css fontFamily属性就足以设置字体

<span style={{ fontFamily: 'Balsamiq-Sans', ... }}>Almost before we knew it, we had left the ground </span>

它确实有效，因为它使用正确的 balsamiq sans 字体来渲染给定的文本，但间距看起来错误。

这是 balsamiq sans 的 HTML 页面中输入的样子

但是生成的 PDF 看起来非常不同

这就像单词之间的间距减少了，谷歌字体中的很多字体都会发生这种情况（但其中一些字体工作正常，如 Dosis 或 Oswald）。

我尝试使用 Font squirrel tool 生成 Web 字体以删除字偶距、更改 x 高度匹配等，并在 html 方法的 fontface 对象配置中使用生成的 ttf，但没有任何运气。我还尝试了 FontFaces 对象中不同的拉伸选项，从“超压缩”到“超扩展”，但没有效果。

我想知道是否有办法改变字体的间距或有帮助的东西。我很感谢对此的任何建议，我已经搜索了几天但没有运气。

更新：

我尝试使用 jspdf v2.5.0 中的 fontFaces API 将字体嵌入到 PDF 中，如here所示，并使用 addFileToVFS 如here所示。

const font = '<base64 font content string>';
doc.addFileToVFS('balsamiqsans-regular-webfont-normal.ttf', font);
doc.addFont('balsamiqsans-regular-webfont-normal.ttf', 'Balsamiq-Sans', 'normal');
doc.setFont('Balsamiq-Sans');

在这两种情况下，我都使用 Linux bash 工具 pdffonts 在 PDF 中看到嵌入字体：

Answer 1

有 答案，将

letter-spacing: 0.01px;

添加到您的 HTML

div

，内容为：

<div id="content" style="font-family: Balsamiq-Sans, serif; letter-spacing: 0.01px;">

Answer 2

我使用 letter-spacing:0.05em 修复了它；这允许字母间距随字体大小缩放。诚然，我没有使用自定义字体，只是使用基本的 Arial、Helvetica，但这样做立即为我解决了这个问题。