Question

如何使用p操纵符从font-url获取字体名称

我正在使用Network.requestIntercepted来获取给定网站上正在使用的字体的列表。但是，响应不包含有关CSS中使用的字体系列的任何信息。

是否可以获取字体家族名称和页面上正在使用的相应字体URL？

  await client.on('Network.requestIntercepted', async e => {
    if (e.resourceType == "Font") {
      console.log(e)
      fontCollection.add(e.request.url)
    }

虽然响应包含字体详细信息，但不包含字体家族名称

{ interceptionId: 'interception-job-14.0',
  request:
   { url:
      'https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf',
     method: 'GET',
     headers:
      { Origin: 'https://goldrate.com',
        'User-Agent':
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/73.0.3679.0 Safari/537.36',
        Accept: '*/*',
        Referer:
         'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i' },
     initialPriority: 'VeryHigh',
     referrerPolicy: 'no-referrer-when-downgrade' },
  frameId: '4127ABB5A3E704843D0AB4756C7507E4',
  resourceType: 'Font',
  isNavigationRequest: false }

Answer 1

您有两个选择：

从URL和/或HTTP标头中猜测字体
下载字体文件并进行检查

选项1：从URL和HTTP标头中猜测字体

通过查看请求信息，可以在两个位置看到字体名称。首先，在URL中，然后在Referer中：

URL

fonts.gstatic.com/s/ 拉托 /v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf
引荐来源：

fonts.googleapis.com/css?family= 拉托：100,100i，300,300i，400,400i，700,700i，900,900i

因此，从该信息中您可以找出正在使用的字体。

选项2：下载字体文件并进行检查

如果第一个选项无法实现（也许您也想抓取其他页面？），则在拦截请求时，始终可以使用node-fetch之类的工具来下载文件然后解析字体文件的元信息。

库fontkit能够解析ttf文件并像familyName或fullName一样读取其Metadata：

代码示例

const fetch = require('node-fetch'); 
const fontkit = require('fontkit');
(async () => {
    const response = await fetch('https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wWyWtFCc.ttf');
    const buffer = await response.buffer();
    const font = fontkit.create(buffer);
    console.log(font.familyName); // "Lato"
    console.log(font.fullName);   // "Lato Regular"
})();

然后您可以在Network.requestIntercepted块中执行此操作，以找出正在使用的字体。

将字体网址映射到字体名称

1 个答案:

选项1：从URL和HTTP标头中猜测字体

选项2：下载字体文件并进行检查