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>

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

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

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

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

1 个答案: