Question

我正在使用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的Net面板可让您查看是否调用了Google字体脚本，但未指定使用了哪些权重。
Chengyin Liu非常好的WhatFont工具（http://chengyinliu.com/whatfont.html），但只允许您将鼠标悬停在单个元素上。

Answer 1

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

Firefox仅加载实际在页面上使用的字体。它们只被加载一次然后存储在一个特殊的字体缓存中。因此，请先了解您网页上使用的字体，再试一次Net panel：

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

=＆GT;在 Net 面板中，您现在应该看到列出的所有字体的请求，这些请求都在页面上使用。

注意：Chrome和Opera中的DevTools也会显示使用过的字体，虽然它们似乎没有字体缓存，因此即使正常页面重新加载，它们也会对它们发出请求（通过 F5 ）。 Internet Explorer（11）并不那么聪明，即使根本不使用它们也总是加载所有字体。

Answer 2

随着Firebug的停产，下面是在Firefox DevTools中获取页面上使用的所有字体及其权重的方法：

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

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

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

Answer 3

这是使用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 个答案: