如何确定哪些 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 Dev Tools 上，悬停记录的元素会在页面中突出显示它。

请注意，“计算的字体系列”并不意味着元素实际上是使用该字体系列呈现的，只是它是从 CSS 计算的字体（或缺少，在默认字体的情况下）。

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

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

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

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 {
     font-family: "Times New Roman", Georgia, ChuckNorris, monospace, 'Comic Sans';
}

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