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

Question

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

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

Answer 1

Puppeteer不直接公开这个API，但是可以使用raw devtools协议来获取“Rendered Fonts”信息：

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