如何过滤网页上可见的HTML节点以提取字体文件-html教程-PHP中文网

如何过滤网页上可见的HTML节点以提取字体文件

碧海醫心

发布： 2025-08-14 17:48:12

原创

358人浏览过

如何过滤网页上可见的html节点以提取字体文件

本文旨在提供一种使用JavaScript过滤网页上可见HTML节点的方法，以便提取网页中实际使用的字体文件。通过结合querySelectorAll、offsetWidth、offsetHeight以及window.getComputedStyle等API，我们可以有效地筛选出在页面上实际呈现的元素，并获取它们使用的字体信息，从而避免提取到未实际显示的字体。

在开发诸如提取网页字体文件的Chrome扩展程序时，一个常见的问题是如何排除那些虽然存在于DOM中，但实际上在页面上不可见的元素。例如，某些网站可能会将字体应用于隐藏的元素或仅在特定条件下显示的元素。为了解决这个问题，我们需要一种方法来过滤出网页上可见的HTML节点。

过滤可见节点

一种有效的方法是利用元素的 offsetWidth 和 offsetHeight 属性。如果一个元素的这两个属性都大于0，则可以认为该元素是可见的。我们可以使用 document.querySelectorAll 获取所有子元素，然后使用 filter 方法来筛选出可见的元素。

以下是示例代码：

文心智能体平台

百度推出的基于文心大模型的Agent智能体平台，已上架2000+AI智能体

查看详情

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

var childNodes = [].slice.call(document.body.querySelectorAll("*"));
var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0);

登录后复制

这段代码首先使用 document.body.querySelectorAll("*") 获取 <body> 元素下的所有子元素。然后，使用 [].slice.call 将返回的 NodeList 转换为数组，以便可以使用数组的 filter 方法。filter 方法使用一个回调函数来判断每个元素是否可见，只有 offsetWidth 和 offsetHeight 都大于 0 的元素才会被保留。

注意： 这种方法比简单地检查 display: none 等CSS属性更为可靠，因为它可以考虑到元素因各种原因而不可见的情况，例如被其他元素遮挡或超出视口范围。

获取可见元素的字体

在获得可见节点列表后，我们可以使用 window.getComputedStyle 来获取每个元素的字体信息。

以下是示例代码：

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

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

登录后复制

这段代码使用 map 方法将可见节点数组转换为字体家族数组。然后，使用 filter 方法过滤掉空字符串或 null 值，确保只保留有效的字体家族。

去重字体家族

为了获得唯一的字体家族列表，可以使用 Set 数据结构。

以下是示例代码：

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

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

登录后复制

这段代码使用 Set 数据结构来存储唯一的字体家族，然后使用展开运算符 ... 将 Set 转换为数组。

完整示例

以下是一个完整的示例，演示了如何过滤网页上可见的HTML节点并提取唯一的字体家族列表：

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);

登录后复制

总结

通过结合 querySelectorAll、offsetWidth、offsetHeight 以及 window.getComputedStyle 等API，我们可以有效地过滤出网页上可见的元素，并获取它们使用的字体信息。这种方法可以帮助我们提取网页中实际使用的字体文件，避免提取到未实际显示的字体，从而提高效率和准确性。在实际应用中，可以根据具体需求进行调整和优化。例如，可以根据特定的CSS选择器来筛选元素，或者使用更复杂的算法来判断元素的可见性。

以上就是如何过滤网页上可见的HTML节点以提取字体文件的详细内容，更多请关注php中文网其它相关文章！