javascript - 用于查找页面上使用的所有字体的脚本

Question

有没有简单的方法来解析 HTML 页面以找到所有使用的字体(或所有使用的字体堆栈)？

或者类似地，是否有一个脚本可以解析页面并返回哪些 CSS 规则被包含并使用或被包含但未被使用？

例子:

如果我解析 index.html，我想知道使用了 2 个字体堆栈:font-family: Georgia, serif 和 font-family: Arial，无衬线字体。

或者，如果我解析 index.html，我想知道使用了 style.css 的第 10、12 和 15 行。

我想某个地方有人为此创建了一个应用程序？有人知道吗？

Answer 1

感谢some of the responses above ，我整理了一个工具来列出所有独特的字体堆栈，然后根据需要使用特定的字体堆栈突出显示所有 DOM 元素。

这是文件；顶部有几个示例显示了不同的使用方式:https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

简而言之，下载该文件并将其包含在您的源代码中，或者将其复制/粘贴到您的 JS 控制台，然后运行 ​​console.log(styleInPage('fontFamily')); 以获取所有独特字体堆栈的数组。

stackoverflow.com 上的示例输出:

Array[3]
    0: "Arial, "Helvetica Neue", Helvetica, sans-serif"
    1: "BlinkMacSystemFont"
    2: "Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif"

然后要突出显示具有特定字体堆栈的所有元素，请运行 highlightInPage(4)(从上面的数组中传入基于 0 的数组键)。要清除所有突出显示，请运行 clearHighlights()。