我该如何确定哪些HTML元素使用了特定字体？

Question

我正在处理一个涉及12种字体下载的网站，我想知道它们被用在哪里。我知道只有当应用于实际渲染文本时，页面才会下载字体 - 我只是不知道这些文本出现在哪个部分。有人知道如何找到大型网页上应用字体的位置的方法或工具吗？

Chrome开发者工具可以帮助您追踪页面下载的字体 - 但是如何跟踪使用这些字体的元素呢？

- Andrew Kirchmyer

---

这个可能可以用JS来实现，也许；但是你有尝试过吗？ - David Thomas

Answer 1

按计算后的 font-family 样式分组获取所有元素

如果您只需要一个极其简单的解决方案，请尝试以下方法：

var fonts = {};

document.querySelectorAll('*').forEach(function(element) {
    var fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');

    fonts[fontFamily] = fonts[fontFamily] || [];

    fonts[fontFamily].push(element);
});

console.log(fonts);

它将通过计算的字体系列对页面元素进行分组，然后将它们记录到控制台中。

至少在Chrome开发工具上，悬停在记录的元素上会在页面中突出显示它。

请注意，“计算的字体系列”并不意味着该元素实际上使用了该字体系列进行渲染，只是该字体系列是从CSS（或默认字体的情况下缺乏CSS）中计算出来的。

获取所有计算的font-family包含字体X的元素

这里是一种类似的方法，针对特定字体：

function getElementsUsingFont(fontName) {
  var elements = [];

  document.querySelectorAll('*').forEach(function(element) {
    var fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');

    if (fontFamily.includes(fontName)) {
      elements.push(element);
    }
  });

  return elements;
}

console.log(getElementsUsingFont('monospace'));

<span style="font-family: monospace">Dragons!</span>

不幸的是，这将捕获包括所给字体名称在其可能字体列表中的元素任何位置的内容。例如：

span {
     font-family: "Times New Roman", Georgia, ChuckNorris, monospace, 'Comic Sans';
}

上面的代码片段会捕获到具有"monospace"样式的任何元素，因为它出现在列表中。你可以调整条件来push元素，以便更仔细地选择（也许使用正则表达式？）。

- crenshaw-dev

---

这感觉像是作弊代码！这不仅是我在寻找的东西 - 它比我要找的好得多。谢谢！ - Andrew Kirchmyer

@AndrewKirchmyer 当然没问题！我添加了一个变体，可能在稍微不同的情况下会有用。 - crenshaw-dev

这太棒了。它很美。 - Chris - Jr