如何确定哪些 html 元素正在使用字体？

Question

我正在开发一个下载十几种字体的网站，我正试图找出它们的使用位置。我知道该页面只会在将字体应用于实际呈现的文本后才下载字体——我只是不知道该文本在页面上的位置。有谁知道任何方法或工具来确定字体在大型网页上的应用位置？

Chrome 开发工具有助于跟踪页面下载的字体 - 但我如何跟踪哪些元素正在使用这些字体？

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 计算的字体（或缺少该字体，在这种情况下）默认字体）。

获取计算出的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>

不幸的是，这将捕获在其可能的字体列表中包含给定字体名称​​anywhere 的元素。例如“

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

上面的 sn-p 将捕获具有该样式的任何元素，因为“等宽”在列表中。您可以修改 push 元素的条件以尝试更仔细地选择（可能是正则表达式？）。