网页中可见的字体文件通常通过CSS引入，例如使用@font-face规则或直接在HTML中引用外部字体文件。要提取这些字体文件，可以按照以下步骤操作：一、查看网页源代码右键点击页面，选择“查看页面源代码”（或按Ctrl+U）。查找与字体相关的代码，如：<linkrel="stylesheet"href="styles.css">或者直接内联的@font-face规则。二、查找CSS中的

你在学习文章相关的知识吗？本文《如何提取网页可见HTML节点中的字体文件》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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

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

过滤可见节点

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

以下是示例代码：

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

这段代码首先使用 document.body.querySelectorAll("*") 获取 元素下的所有子元素。然后，使用 [].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选择器来筛选元素，或者使用更复杂的算法来判断元素的可见性。

今天关于《网页中可见的字体文件通常通过CSS引入，例如使用@font-face规则或直接在HTML中引用外部字体文件。要提取这些字体文件，可以按照以下步骤操作：一、查看网页源代码右键点击页面，选择“查看页面源代码”（或按Ctrl+U）。查找与字体相关的代码，如：或者直接内联的@font-face规则。二、查找CSS中的字体定义打开相关CSS文件（如styles.css），查找@font-face规则：@font-face{font-family:'MyFont';src:url('myfont.woff')format('woff');}src属性中会包含字体文件的URL路径。三、直接下载字体文件根据CSS中提供的URL路径，手动访问该链接并下载字体文件。例如：https://example.com/fonts/myfont.woff可以使用浏览器开发者工具（F12）中的“Network”标签，查看加载的字体资源。四、使用浏览器开发者工具打开开发者工具（F12）。2》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！