使用pdf-creator-node生成PDF时文本始终显示斜体如何解决

问题根因 #

该问题是pdf-creator-node底层渲染引擎未正确加载你引入的Playfair Display常规字重字体、 fallback 到斜体字体导致的，可按以下步骤解决：

解决方案 #

• 调整Google字体引入链接，明确指定非斜体字重参数，你当前的链接只声明了字重未声明字体样式，渲染引擎会默认匹配斜体版本。修改后链接为：
  https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500&family=Sacramento&display=swap

• 新增全局字体样式规则，避免部分子元素未继承到根元素的font-style配置，在你的style标签最顶部添加：

* {
  font-style: normal !important;
}

• 调整pdf-creator-node渲染配置，确保字体加载完成后再生成PDF：

  1. 在HTML的</body>标签前添加脚本：

  <script>
    document.fonts.ready.then(() => {
      window.pdfRenderReady = true;
    })
  </script>
  2. 调用pdf-creator-node时的options参数新增如下配置：
  ```javascript
  const options = {
    // 其余原有配置保留
    waitForJS: true,
    waitFor: "window.pdfRenderReady === true"
  }
  

• 如仍有问题，可将字体文件下载到本地转base64后通过@font-face内嵌到CSS中，完全规避外部字体网络加载失败的问题，示例规则如下：

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url(data:font/ttf;base64,这里替换为你转码后的字体base64内容) format('truetype');
}

另外你当前body样式中同时声明了display: table和display: flex冗余规则，可删除display: table避免解析异常。

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