javascript - 如何使用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 看起来非常不同

这就像单词之间的空间变小了，很多来自 Google 字体的字体都会出现这种情况(但其中一些字体效果很好，如 Dosis 或 Oswald)。

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

我想知道是否有一种方法可以改变字体的间距或有什么帮助。我很感激任何关于这方面的建议，我已经搜索了几天但没有成功。

更新:

我已经尝试使用 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

有an answer ，将 letter-spacing: 0.01px; 添加到您的 HTML div 中，内容为:

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