我得到了一个 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' } 选项对我有用。
关于javascript - 如何在 Handlebars 和 Puppeteer 中使用自定义字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66154854/