用于查找页面上使用的所有字体的脚本 [英] Script to find all fonts used on a page

问题描述

是否有简单的方法来解析HTML页面以查找所使用的所有字体（或使用的所有字体堆栈）？

Is there easy way to parse a HTML page to find all the fonts used (or all the font stacks used)?

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

Or similarly, is there a script that parses a page and returns which CSS rules are included and used or included and are not used?

示例：

如果我解析索引。 html ，我想知道使用了2个字体堆栈： font-family：Georgia，serif 和 font-family ：Arial，sans-serif 。

If I parse index.html, I want to know that 2 font stacks are used: font-family: Georgia, serif and font-family: Arial, sans-serif.

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

Or, if I parse index.html, I want to know that lines 10, 12, and 15 of style.css are used.

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

I imagine somewhere someone has created an app for this? Anyone know of anything?

推荐答案

感谢上面的一些回复，我把一个工具列出所有独特的字体堆栈，然后根据需要使用特定的字体堆栈突出显示所有DOM元素。

Thanks to some of the responses above, I put together a tool to list all unique font stacks and then highlight all DOM elements using a specific font stack, if desired.

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

Here’s the file; there are a couple of examples at the top showing different ways to use it: https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a

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

In short, download and include the file in your source code, or copy/paste it into your JS console, then run console.log(styleInPage('fontFamily')); to get an array of all unique font stacks.

示例输出在stackoverflow.com上：

Example output on 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）（从数组abo传入基于0的数组键阳离子）。要清除所有亮点，请运行 clearHighlights（）。

Then to highlight all elements with a specific font stack, run highlightInPage(4) (pass in the 0-based array key from the array above). To clear all highlights, run clearHighlights().

这篇关于用于查找页面上使用的所有字体的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！