使用Chrome无头浏览器获取渲染字体 [英] Fetch rendered font using Chrome headless browser
问题描述
我一直在浏览Chrome浏览器的无头浏览器文档,但到目前为止无法找到此信息.
I have been looking through the Chrome headless browser documentation but unable to found this information so far.
是否可以在网站上捕获渲染的字体?这些信息可通过Chrome开发者控制台获取.
Is it possible to capture the rendered font on a website? This information is available through the Chrome dev console.
推荐答案
Puppeteer不会直接公开此API,但是可以使用raw devtools协议获取渲染字体"信息:
Puppeteer doesn't expose this API directly, but it's possible to use the raw devtools protocol to get the "Rendered Fonts" information:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.stackoverflow.com/');
await page._client.send('DOM.enable');
await page._client.send('CSS.enable');
const doc = await page._client.send('DOM.getDocument');
const node = await page._client.send('DOM.querySelector', {nodeId: doc.root.nodeId, selector: 'h1'});
const fonts = await page._client.send('CSS.getPlatformFontsForNode', {nodeId: node.nodeId});
console.log(fonts);
await browser.close();
})();
可在以下位置找到CSS.getPlatformFontsForNode
的devtools协议文档: https://chromedevtools.github.io/devtools-protocol/tot/CSS#method-getPlatformFontsForNode
The devtools protocol documentation for CSS.getPlatformFontsForNode
can be found here: https://chromedevtools.github.io/devtools-protocol/tot/CSS#method-getPlatformFontsForNode
这篇关于使用Chrome无头浏览器获取渲染字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!