javascript - 如何在 Handlebars 和 Puppeteer 中使用自定义字体？-6ren

javascript - 如何在 Handlebars 和 Puppeteer 中使用自定义字体？

转载作者：行者123 更新时间：2023-12-05 06:04:57

我得到了一个 Handlebar 模板，我使用 Puppeteer 将其转换为 PDF。问题是如何使用自定义字体？

目前，我的 app.js 文件中有一个静态文件夹，声明如下:app.use(express.static(path.join(__dirname, 'assets'))); 。这包含自定义字体。

在我的 Handlebar 模板中，我这样声明这些字体:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    @font-face {
      font-family: 'SourceSansPro';
      src: url("../assets/fonts/SourceSansPro-Regular.ttf");
      font-style: normal;
    }

    @font-face {
      font-family: 'SourceSansPro';
      src: url("../assets/fonts/SourceSansPro-Italic.ttf");
      font-style: italic;
    }

    @font-face {
      font-family: 'SourceSansPro';
      src: url("../assets/fonts/SourceSansPro-Bold.ttf");
      font-weight: 600;
    }

    body {
      font-family: 'SourceSansPro';
      font-stretch: normal;
    }
  </style>
</head>

但是在生成 pdf 时，会加载标准字体而不是自定义字体。

最佳答案

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('file://C:/Path/to/yours/index.html', { waitUntil: 'networkidle0' });
    await page.pdf({
        path: 'test.pdf',
        printBackground: true,
        //more custom options here
    });
    await browser.close();
})();

添加 { waitUntil: 'networkidle0' } 选项对我有用。

https://github.com/puppeteer/puppeteer/issues/422

Puppeteer - page.goto(url[, options])

关于javascript - 如何在 Handlebars 和 Puppeteer 中使用自定义字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66154854/