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

【问题标题】：How to identify all weights of all fonts used on page/site如何识别页面/网站上使用的所有字体的所有权重
【发布时间】：2014-06-21 10:58:31
【问题描述】：

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

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

2020 年 4 月更新

对于它的价值，我不再使用以下任何解决方案，我已经使用名为 FontsNinja 的 Chrome 插件几年了，它在精确定位页面上使用的字体和粗细方面做得非常出色。

【问题讨论】：

标签： fonts firebug font-face google-font-api

【解决方案1】：

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

打开 DevTools（例如通过 F12）
切换到检查器面板
在其中选择<html> 元素
在 Inspector 面板中切换到 Fonts 侧面板
展开底部的页面上的所有字体面板

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

有关示例，请参见以下屏幕截图：

【讨论】：

谢谢，这是一个令人难以置信的资源！我希望这被标记为官方答案。
这对每个页面都很好，但是还有其他方法可以检查整个网站吗？
至少没有 DevTools。我相信，这将需要下载和解释所有页面，并自动检查没有工具的网站使用了哪些字体。通过 WebDriver 远程控制浏览器可能会以某种方式实现，但老实说，在这种情况下，我宁愿使用最小优先的方法。 IE。只包括我绝对需要的字体和粗细，然后在需要时添加更多，或者尽可能使用variable font。
请在此处查看我对原始问题的编辑以获取更新

【解决方案2】：

这是一个使用 Jquery 在控制台中运行的页面的快速脚本，它将记录所有字体/样式/粗细：

var ret={};
$('*').each(function () {
    var str = $(this).css('font-family');
    str = str  + ':' + $(this).css('font-weight');
    str = str + ':' + $(this).css('font-style');
    if (ret[str] ) {
      ret[str] = ret[str] + 1;
    } else {
      ret[str] = 1;
    }

});
console.log(ret);

【讨论】：

【解决方案3】：

Firebug 的网络面板可让您查看是否调用了 google 字体脚本，但未指定使用了哪些权重。

Firefox 只加载页面上实际使用的字体。它们只加载一次，然后存储在特殊的字体缓存中。所以去了解一下你的页面上使用了哪些字体，再试试Net panel：

在您的页面上打开 Firebug
启用并切换到 Net 面板
单击面板工具栏中的字体过滤器
通过Ctrl+F5重新加载页面到circumvent the cache

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

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

【讨论】：

好的，我可以看到加载的字体列表，并且 URL 告诉我它们所属的 font-family，但是我如何知道正在加载的权重？它们似乎都有随机字符串。
由于 Firebug 不再存在，您可能指的是集成到 Firefox 中的 DevTools。我创建了一个单独的答案，解释了如何在那里获取字体粗细信息。