如何使用自定义字体与车把和木偶?



我得到了一个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

木偶师-页。转到(url[选项])

最新更新