本文旨在提供一种高效的方法，通过 JavaScript 过滤出网页上实际可见的 HTML 节点，并提取这些节点所使用的字体。通过使用 offsetWidth 和 offsetHeight 属性进行可见性判断，并结合 window.getComputedStyle 获取字体信息，可以准确地识别网页上实际渲染的字体资源，避免提取到未显示的元素的字体，从而优化字体资源提取的效率和准确性。
在网页开发中，有时我们需要提取网页上实际显示的元素的信息，例如字体。直接遍历所有元素可能会包含隐藏的元素，导致提取的信息不准确。本教程将介绍如何使用 JavaScript 过滤出网页上可见的 HTML 节点，并获取它们使用的字体。
过滤可见节点
核心思路是利用元素的 offsetWidth 和 offsetHeight 属性来判断其是否可见。如果一个元素的这两个属性都大于 0，则可以认为该元素是可见的。这种方法比简单地检查 display: none 等 CSS 属性更为可靠，因为它考虑了元素是否被裁剪、透明度等因素。
以下代码展示了如何获取网页上所有可见的 HTML 节点：
立即学习“前端免费学习笔记（深入）”；
var childNodes = [].slice.call(document.body.querySelectorAll("*"));
var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);
console.log(visibleNodes); // 输出所有可见节点这段代码首先使用 querySelectorAll("*") 获取 <body> 元素下的所有子元素。然后，使用 [].slice.call() 将 NodeList 转换为数组，以便使用 filter 方法。最后，filter 方法根据 offsetWidth 和 offsetHeight 属性过滤出可见节点。
获取可见节点的字体
获取可见节点的字体可以使用 window.getComputedStyle 方法。该方法可以获取元素最终应用的样式。
以下代码展示了如何获取所有可见节点的字体，并去除空值或 null 值：
var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff); console.log(fontFamilies); // 输出所有可见节点的字体
这段代码首先使用 map 方法遍历 visibleNodes 数组，并使用 window.getComputedStyle(node).fontFamily 获取每个节点的字体。然后，使用 filter 方法过滤掉空值或 null 值。
去重字体列表
有时，我们需要获取唯一的字体列表。可以使用 Set 数据结构来去重。
以下代码展示了如何获取唯一的字体列表：
var uniqueFamilies = [...new Set(fontFamilies)]; console.log(uniqueFamilies); // 输出唯一的字体列表
这段代码使用 Set 数据结构来存储字体，因为 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); // 输出唯一的字体列表注意事项
- offsetWidth 和 offsetHeight 属性可能会受到 CSS 样式的影响，例如 transform 属性。
- window.getComputedStyle 方法的性能可能受到影响，特别是当需要处理大量节点时。
- 此方法只能获取到元素最终应用的字体，无法获取到字体文件的 URL。
总结
本文介绍了如何使用 JavaScript 过滤出网页上可见的 HTML 节点，并获取它们使用的字体。通过使用 offsetWidth 和 offsetHeight 属性进行可见性判断，并结合 window.getComputedStyle 获取字体信息，可以准确地识别网页上实际渲染的字体资源。该方法可以应用于各种场景，例如字体资源提取、网页性能优化等。
