使用 Chrome 无头浏览器获取渲染字体答案

【问题标题】：Fetch rendered font using Chrome headless browser使用 Chrome 无头浏览器获取渲染字体
【发布时间】：2017-12-20 17:41:41
【问题描述】：

我一直在浏览 Chrome 无头浏览器文档，但到目前为止找不到此信息。

是否可以在网站上捕获呈现的字体？此信息可通过 Chrome 开发控制台获得。

【问题讨论】：

标签： javascript google-chrome puppeteer

【解决方案1】：

Puppeteer 不直接公开此 API，但可以使用原始 devtools 协议获取“渲染字体”信息：

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

【讨论】：

非常感谢，几个月来我一直在努力获取这些信息，但没有看到这个文档！
@Pasi 有没有办法在不使用 puppeteer 的情况下获得渲染的字体，即只需输入 DevTools？