时间戳

首页 > 解决方案 > Puppeteer 屏幕截图未在网页上呈现正确的字体？

puppeteer - Puppeteer 屏幕截图未在网页上呈现正确的字体？

问题描述

我正在使用 Puppeeter 截屏，无论我做什么，页面上的文本都不会以正确的字体呈现。我已经进行了大量研究，其中包括了一些人们提到的可能对字体有帮助的标志。我在云中的 docker 容器中运行 puppeteer。

这是我的代码片段。在我截屏的页面上，我有

const generateImage = async () =>{
           const browser = await puppeteer.launch({headless: true, args: ['--no-sandbox','--font-render-hinting=none']});
           const page = await browser.newPage();
           await page.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36");
           await page.setViewport({width:1200,height:1200,});
           await page.goto(url, {"waitUntil" : "networkidle0"});
          
           await page.screenshot({path:`./${form.zoneid}-${form.formid}.jpg`,type: 'jpeg', quality: 100,});
           await browser.close()
       }
       await generateImage()

这是我要截屏的 URL： https ://dev.graceblocks.com/form?x=MTI0fGdyYWNlYmxvY2tzLTF8NDU=&mode=preview&social=1

请注意标题文本是 Arial Black，但屏幕截图始终默认为 Times new Roman ......所以不知何故，它似​​乎忽略了字体设置。我认为 Arial Black 是任何浏览器都可以识别的标准网络字体？

为了让这个屏幕截图呈现正确的字体，我需要设置一些其他设置吗？

标签： puppeteer

解决方案

推荐阅读