如何在使用 puppeteer 生成的 pdf 上使用 Roboto 字体系列答案

【问题标题】：How can i use Roboto font family on my pdf which is generated with puppeteer如何在使用 puppeteer 生成的 pdf 上使用 Roboto 字体系列
【发布时间】：2020-12-27 01:13:42
【问题描述】：

我想在我的 pdf 中添加 Roboto 字体，请帮助我将此字体设置为 pdf

【问题讨论】：

标签： html css node.js pdf puppeteer

【解决方案1】：

我发现了一个边缘情况，似乎没有为 PDF 渲染加载 webfonts，除非您先触发屏幕截图：

var puppeteer = require('puppeteer')

var document = `
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        @import url(https://fonts.googleapis.com/css?family=Signika);
        body {
          font-family: 'Signika', sans-serif;
        }
      </style>
    </head>
    <body>
      <h1>Hello world!</h1>
    </body>
    </html>
  `

puppeteer.launch().then(async browser => {
  let page = await browser.newPage()
  await page.setContent(document, { waitUntil: 'networkidle2' }) // <= here you should pass the second argument
  await page.pdf({
    path: 'print.pdf',
    format: 'A4'
  })
  browser.close()
})

参考-

GITHUB

【讨论】：