如何识别页面/站点上使用的所有字体的所有权重

Question

我正在使用谷歌网络字体。最初，我包括给定家庭的所有权重，以便我可以选择我想要的所有权重。例如：

  <link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet'>

完成后，我只希望在页面加载时获取我最终使用的权重以最小化大小。我完成的链接看起来像

<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,900,900italic' rel='stylesheet'>

我想我可以滚动浏览整个 CSS 目录并观察所有页面以找到我使用的所有权重，但这很容易出错。一目了然，我怎么知道我最终使用了哪些权重？

PS：我尝试了几件事：

Firebug 的 Net 面板可让您查看是否调用了 google 字体脚本，但未指定使用了哪些权重。
Chengyin Liu 非常好的 WhatFont 工具 ( http://chengyinliu.com/whatfont.html ) 但它只能让您将鼠标悬停在单个元素上。

2020 年 4 月更新

就其价值而言，我不再使用以下任何解决方案，几年来我一直在使用名为FontsNinja的 Chrome 插件，它在精确定位页面上使用的字体和粗细方面做得非常出色。

Answer 1

由于 Firebug 已停产，以下是在 Firefox DevTools 中获取页面上使用的所有字体及其粗细的方法：

这将显示页面上使用的所有字体的列表。对于每种网络字体，您可以看到@font-face定义它的 CSS 规则，包括字体粗细信息。

请参阅以下屏幕截图作为示例：

Answer 2

Firebug 的 Net 面板可以让您查看是否调用了 google fonts 脚本，但没有指定使用了哪些权重。

Firefox 仅加载页面上实际使用的字体。它们只加载一次，然后存储在特殊的字体缓存中。因此，请了解您的页面上使用了哪些字体，再尝试一下网络面板：

=> 在网络面板中，您现在应该看到对页面上使用的列出的字体的所有请求。

注意：Chrome 和 Opera 中的 DevTools 也会向您显示使用的字体，尽管它们似乎没有字体缓存，因此即使正常页面重新加载（通过F5），它们也会发出请求。Internet Explorer (11) 并不那么智能，即使根本不使用字体，它也会始终加载所有字体。