Puppeteer 在 Node.js 无服务器 AWS lambda 的页眉和页脚中使用谷歌字体

Question

我正在使用带有无服务器框架的 Node.js AWS lambda，PDF 生成工作正常，现在我需要在页眉和页脚部分使用自定义字体，我尝试在无服务器和还尝试通过 css 导入字体，这两种方式都不起作用有谁知道我们如何使用 puppeteer 在页眉和页脚中使用自定义字体。

下面是我生成 PDF 的助手类：

import * as chromium from "chrome-aws-lambda";
import { GetPDFBuffer } from "./types/HelperTypes";

export class Helper {
  static getPDFBuffer: GetPDFBuffer = async (html: string, options: any) => {
    let browser = null;
    try {
      const executablePath = process.env.IS_OFFLINE
        ? null
        : await chromium.executablePath;
      browser = await chromium.puppeteer.launch({
        args: chromium.args,
        executablePath,
      });

      const page = await browser.newPage();
      const loaded = page.waitForNavigation({
        waitUntil: "networkidle0",
      });
      await page.setContent(html, { "waitUntil": ['load', 'domcontentloaded', 'networkidle0'] });
     
      await loaded;
      return await page.pdf(options);
    } catch (error) {
      return error;
    } finally {
      if (browser !== null) {
        await browser.close();
      }
    }
  };
}  

Answer 1

页眉和页脚在外部样式方面有一些限制。

如果您想使用自定义 google 字体，您必须下载该字体并将其安装为系统字体，chrome 会自动从您的字体系列规则中选择它。

例子：

1. 下载https://fonts.google.com/specimen/Open+Sans
2. 按照操作系统的说明安装字体。例如，在 Mac 上使用 Font Book。
3. 在页眉或页脚中引用字体，就像引用任何其他系统字体一样：

<style>
  footer {
    font-family: 'Open Sans', sans-serif;
  }
</style>