Получить вычисленное семейство шрифтов в JavaScript

Question

Это продолжение этого вопроса.

Я работаю над компонентом для CKEditor, настроенной версии раскрывающихся меню шрифтов, которые всегда отображают текущие выбранные значения семейства / размера шрифта, независимо от того, где они были определены, используя computedStyle и супруги.

Как вы можете видеть в другом вопросе, определение размера шрифта теперь работает кросс-браузерно. Теперь у меня проблемы с работой с fontFamily приписывать. Моя общая функция "computed style" возвращает только полную строку шрифта, которая была определена, например

Times New Roman, Georgia, Serif

Что мне нужно, чтобы сопоставить настройку с записями в раскрывающемся списке семейства шрифтов, это фиксированное имя шрифта фактического шрифта проверяемого элемента DOM.

Можно ли это как-то сделать, по крайней мере, для наиболее распространенных веб-шрифтов?

Answer 1

Я не думаю, что есть какие-либо методы, чтобы сделать это напрямую, но Лалит Патель придумала хитрую технику, которая создает элемент с несколькими буквами в нем и угадывает шрифт по ширине элемента.

Смотрите http://www.lalit.org/lab/javascript-css-font-detect

Answer 2

Этой ветке почти 12 лет, но, поскольку она все еще появляется в результатах поиска, вот способ получить вычисленное семейство шрифтов с помощью javascript из DOM:

      let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family') // e.g. "Times New Roman"

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle .

Answer 3

UA выбирает первый шрифт в списке, который он находит установленным. Шрифты, установленные в ОС, на самом деле не являются частью DOM, поэтому лучшее, что вы можете сделать, - это угадать.