html - 如何确定哪些 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 计算的字体(或者在这种情况下缺少 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';
}

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