如何筛选网页上可见的HTML节点并提取字体信息

筛选网页上可见的HTML节点并提取字体信息

摘要：本文旨在提供一种高效的方法，用于筛选网页上实际可见的HTML节点，并提取这些节点所使用的字体信息。通过结合 querySelectorAll、offsetWidth、offsetHeight 和 getComputedStyle 等技术，可以精准地定位到用户实际看到的文本元素，并获取其字体家族，从而避免提取到隐藏或未使用的字体，为网页字体分析和优化提供有力支持。

在网页开发中，有时需要分析网页上实际使用的字体，例如构建 Chrome 扩展程序来提取网页上的字体文件。然而，一些网站可能会将字体应用于未实际显示的元素，例如隐藏的元素或仅在特定条件下显示的元素。因此，需要一种方法来筛选出网页上可见的 HTML 节点，并仅提取这些节点使用的字体信息。

一种有效的方法是结合使用 querySelectorAll、offsetWidth 和 offsetHeight 属性，以及 getComputedStyle 方法。

1. 获取所有子元素

立即学习“前端免费学习笔记（深入）”；

首先，使用 document.body.querySelectorAll(“*”) 获取

元素下的所有子元素。为了方便后续处理，将返回的 NodeList 转换为数组：

var childNodes = [].slice.call(document.body.querySelectorAll("*"));

2. 筛选可见节点

然后，使用 filter 方法筛选出可见的节点。一个节点被认为是可见的，如果其 offsetWidth 和 offsetHeight 属性都大于 0。这两个属性分别表示元素的可见宽度和高度。

var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);

与 jQuery 的 :visible 选择器简单地检查 display: none 属性不同，使用 offsetWidth 和 offsetHeight 可以更准确地判断元素是否可见，因为它们考虑了更多的因素，例如元素的尺寸、溢出等。

3. 获取字体家族

接下来，可以使用 window.getComputedStyle 方法获取每个可见节点的字体家族。

var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily);

getComputedStyle 方法返回一个对象，其中包含了元素的所有计算样式。可以通过 fontFamily 属性获取字体家族。

4. 过滤空值

由于某些节点可能没有设置字体家族，因此需要过滤掉空值或 null 值。可以使用双重否定 !! 来实现：

var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff);

5. 获取唯一字体家族列表

最后，可以使用 Set 对象和展开运算符 … 来获取唯一的字体家族列表：

var uniqueFamilies = [...new Set(fontFamilies)];

Set 对象会自动去除重复的值，展开运算符可以将 Set 对象转换为数组。

完整代码示例：

var childNodes = [].slice.call(document.body.querySelectorAll("*")); var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0); var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff); var uniqueFamilies = [...new Set(fontFamilies)];  console.log(uniqueFamilies);

注意事项：

• 此方法只能检测到通过 CSS 设置的字体。如果字体是通过 JavaScript 动态设置的，则可能无法检测到。
• 此方法可能会受到一些特殊 CSS 样式的影响，例如 transform: scale(0) 会导致 offsetWidth 和 offsetHeight 为 0，即使元素实际上是可见的。

总结：

通过结合使用 querySelectorAll、offsetWidth、offsetHeight 和 getComputedStyle 等技术，可以有效地筛选出网页上可见的 HTML 节点，并提取这些节点所使用的字体信息。这种方法可以应用于各种场景，例如网页字体分析、字体优化、Chrome 扩展程序开发等。虽然存在一些局限性，但总体而言，它是一种高效且可靠的解决方案。