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

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 的网络面板可让您查看是否调用了 google 字体脚本，但未指定使用了哪些权重。

Chengyin Liu 非常好的 WhatFont 工具( http://chengyinliu.com/whatfont.html )，但这只能让您将鼠标悬停在单个元素上。

2020 年 4 月更新

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

Answer 1

1. Firebug's Net panel lets you see whether the google fonts script was called but does not specify which weights were used.

Firefox 只加载页面上实际使用的字体。它们只加载一次，然后存储在一个特殊的字体缓存中。
因此，去了解您的页面上使用了哪些字体，再试一次 Net panel:

在您的页面上打开 Firebug

启用并切换到网络面板

单击面板工具栏中的字体过滤器

通过 Ctrl+F5 重新加载页面到 circumvent the cache

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

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