Как определить, какие 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

Вот аналогичный подход, нацеленный на определенный шрифт:

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';
}

Приведенный выше фрагмент будет захватывать любой элемент с этим стилем, потому что в списке есть" monospace ". Вы можете изменить условия для push элемента, чтобы попытаться выбрать более тщательно (может быть, регулярное выражение?).