Как я могу реально увидеть, какой шрифт использует элемент?

Question

Когда я смотрю на семейство шрифтов HTML-элемента (из js, firebug или аналогичного), это всегда список.Как я могу увидеть, какой из шрифтов на самом деле используется из списка?

Answer 1

Я понимаю, что это не идеально, но вы можете скопировать текст из области просмотра и вставить его в текстовый редактор, и он скажет вам.

Answer 2

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

Answer 3

Дополнение Font Finder для Firefox может сделать это. Поскольку это вполне возможно, было бы удобно, если бы это было встроено в Firebug.

---

Обновление 2012/2/4:

Я изучил источник Font Finder, чтобы выяснить, как он работает, и на самом деле это хитрый маленький взлом. Соответствующий код находится в классе детектора в fontfinder.js . Цитировать источник:

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

То, что он делает, похоже на автоматическую версию Ответ Марселя . Итак, как это работает, так это то, что фиктивный элемент - с текстом «mmmmmmmmmmlil» - добавляется в DOM. Он настроен на использование резервного шрифта браузера «serif» с размером шрифта 72 пикселя. При этом Font Finder знает ширину и высоту элемента, когда используется резервный шрифт. Затем он просто перебирает все шрифты, перечисленные в font-family, устанавливая по очереди шрифт для элемента, для каждого из списка. Если ширина и высота элемента соответствуют ширине и высоте, когда был установлен резервный шрифт, мы можем сделать вывод, что данный шрифт отсутствует. Первый шрифт в списке, который дает элементу другую ширину или высоту, будет тем шрифтом, который фактически отображается (примечание: существует особый случай, когда резервный шрифт «serif» находится в списке font-family ).

Существует также версия Font Finder для Chrome. Он отличается ( соответствующий источник ) тем, что резервный шрифт браузера выглядит как «sans», а не «serif». Любой код, использующий этот метод, должен иметь специфические для браузера знания о резервном шрифте.