时间戳

首页 > 解决方案 > 如何确定哪些 html 元素正在使用字体？

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

问题描述

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

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

标签： htmlcssfontsfrontend

解决方案

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>

不幸的是，这将捕获在其可能字体列表中的任何位置包含给定字体名称的元素。例如”

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

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

推荐阅读