Как определить, какой из определенных шрифтов использовался на веб-странице?

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Следует иметь в виду, что некоторые браузеры заменяют определенные отсутствующие шрифты аналогичными шрифтами, что невозможно обнаружить с помощью трюка JavaScript/CSS. Например, браузеры Windows заменят Helvetica на Arial, если он не установлен. Упомянутый трюк MojoFilter и dragonmatank по-прежнему будет сообщать, что Helvetica установлена, даже если это не так.

Небольшое предостережение: если вы предлагаете ссылку для загрузки Calibri, имейте в виду, что, хотя он входит в состав нескольких продуктов Microsoft, это не бесплатный шрифт, и вы нарушаете авторские права, предлагая его для загрузки.

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

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

Другой подход с использованием measureText элемента canvas

ссылки не работают, возможно, они перенаправляют меня на рекламу. только я?

Да, он ушел. Думаю, это не должно удивлять для статьи 15-летней давности. Подход, который использует @ Wildhoney, звучит очень похоже.

Я написал простой инструмент JavaScript, который вы можете использовать, чтобы проверить, установлен ли шрифт или нет. Он использует простую технику и должен быть правильным в большинстве случаев.

Обнаружение шрифта не решает проблему. Вы можете использовать его для перебора объявленных шрифтов и проверки того, что является допустимым, но он дает мало или вообще не дает информации о том, какой шрифт используется для любого данного div. Если вы создаете div из JS, как мы можем узнать, какой шрифт используется?

@ JonLennartAasenden Чтобы получить используемый шрифт, я думаю, вы можете использовать свойство «computedStyle» (я забыл точное название, но это что-то вроде этого).

Я написал класс, который работает во всех браузерах. Он написан на Smart Pascal, который компилируется в JS, поэтому я не могу опубликовать решение здесь, но, короче говоря, мне пришлось извлечь строку семейства шрифтов, затем проверить, что каждый шрифт действителен, взять первый действующий - и что работает везде. Я портировал «детектор шрифтов» на смарт-паскаль и сделал некоторые настройки.

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

На самом деле, Safari не выдает используемый шрифт, вместо этого Safari всегда возвращает первый шрифт в стеке, независимо от того, установлен ли он, по крайней мере, по моему опыту.

font-family: "my fake font", helvetica, san-serif;

Предполагая, что Helvetica установлена/используется, вы получите:

• «мой поддельный шрифт» в Safari (и я верю в другие браузеры webkit).
• «мой поддельный шрифт, Helvetica, San-Serif» в браузерах Gecko и IE.
• «helvetica» в Opera 9, хотя я читал, что они меняют это в Opera 10, чтобы оно соответствовало Gecko.

Я решил эту проблему и создал Font Unstack , который проверяет каждый шрифт в стеке и возвращает только первый установленный. Он использует трюк, о котором упоминает @ MojoFilter, но возвращает первый, только если установлено несколько. Хотя он страдает от слабости, о которой упоминает @ tlrobinson (Windows молча заменит Arial на Helvetica и сообщит, что Helvetica установлена), в остальном он работает хорошо.

Работающий метод заключается в том, чтобы посмотреть на вычисленный стиль элемента. Это поддерживается в Opera и Firefox (и я разбираюсь в сафари, но не проверял). IE (по крайней мере, 7) предоставляет метод для получения стиля, но, похоже, это то, что было в таблице стилей, а не вычисленный стиль. Подробнее о quirksmode: Get Styles

Вот простая функция для захвата шрифта, используемого в элементе:

/**
 * Get the font used for a given element
 * @ argument {HTMLElement} the element to check font for
 * @ returns {string} The name of the used font or null if font could not be de
 */
 function getFontForElement(ele) {
	if (ele.currentStyle) { // sort of, but not really, works in IE
		return ele.currentStyle["fontFamily"];
	} else if (document.defaultView) { // works in Opera and FF
		return document.defaultView.getComputedStyle(ele,null).getPropertyValu
	} else {
		return null;
	}
}

Если правило CSS для этого было:

#fonttester {
	font-family: sans-serif, arial, helvetica;
}

Затем он должен вернуть Helvetica, если он установлен, если нет, Arial и, наконец, имя системного шрифта без засечек по умолчанию. Обратите внимание, что порядок шрифтов в объявлении CSS имеет большое значение.

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

Это возвращает полную строку CSS, например «Helvetica, Arial, sans-serif». Он не возвращает фактический используемый шрифт.

Упрощенная форма:

function getFont() {
	return document.getElementById('header').style.font;
}

Если вам нужно что-то более полное, проверьте это .

Есть простое решение - просто используйте element.style.font :

function getUserBrowsersFont() {
	var browserHeader = document.getElementById('header');
	return browserHeader.style.font;
}

Эта функция будет делать именно то, что вы хотите. При выполнении он вернет тип шрифта пользователя/браузера. Надеюсь, это поможет.

Я пробую это в Safari для элемента, который определенно имеет шрифт Arial, и я получаю «» в качестве шрифта. Есть идеи, почему?

Наиболее вероятная причина в том, что это проверяет только установленный шрифт, и если шрифт не установлен, вероятно, в качестве шрифта используется Arial.

@ AlessandroVermeulen это потому, что element.style возвращает только значения, установленные в атрибутах стиля, и не будет возвращать никаких значений из других источников (т. е. значения по умолчанию из элементов стиля, внешнего css или пользовательского агента не будут возвращены). Этот ответ следует удалить, поскольку он вводит в заблуждение/неверен. Невероятно, что он получил награду!

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

Другим решением может быть автоматическая установка шрифта @font-face, что может свести на нет необходимость обнаружения.

@ font-face {
	font-family: "Calibri";
	src: url("http_www_yourwebsite_com_fonts/Calibri.eot");
	src: local("Calibri"), url("http_www_yourwebsite_com_fonts/Calibri.ttf") f
}

Конечно, это не решит никаких проблем с авторскими правами, однако вы всегда можете использовать бесплатный шрифт или даже создать свой собственный шрифт. Вам понадобятся оба .eot & .ttf файлы, чтобы работать лучше.

Calibri — это шрифт, принадлежащий Microsoft, и его нельзя распространять бесплатно. Кроме того, требовать от пользователя загрузки определенного шрифта не очень удобно.

Я бы посоветовал приобрести лицензию на шрифт и встроить его в свое приложение.

+1 за встраивание шрифта. Это решает проблему, не обнаруживая ничего.

Я бы посоветовал проверить Google Fonts на что-то подобное, прежде чем покупать что-либо.

За исключением того, что если пользователь находится на компьютере с Windows, он может просматривать Calibri. В этом весь смысл резервных списков.

И ваш ответ не имеет отношения к вопросу и должен быть комментарием.

Я использую Фонт. Вам просто нужно перетащить кнопку Fount на панель закладок, щелкнуть по ней, а затем щелкнуть определенный текст на веб-сайте. Затем он покажет шрифт этого текста.

Вы можете поместить Adobe Blank в семейство шрифтов после шрифта, который вы хотите видеть, и тогда любые глифы, не относящиеся к этому шрифту, не будут отображаться.

например:

font-family: Arial, 'Adobe Blank';

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

Это усложняется тем фактом, что браузеры имеют пользовательские настройки для шрифтов с засечками/без засечек/моноширинных шрифтов, а также имеют свои собственные жестко закодированные резервные шрифты, которые они будут использовать, если глиф не будет найден ни в одном из шрифтов в строке. стек шрифтов. Таким образом, браузер может отображать некоторые глифы шрифтом, которого нет в стеке шрифтов или в настройках шрифта браузера пользователя. Chrome Dev Tools покажет вам каждый визуализированный шрифт для глифов в выбранном элементе . Таким образом, на вашей машине вы можете видеть, что она делает, но нет никакого способа узнать, что происходит на машине пользователя.

Также возможно, что система пользователя может сыграть в этом роль, например , Window выполняет замену шрифта на уровне глифа.

так...

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

Если вы хотите протестировать его в JS, вы можете визуализировать отдельные глифы с помощью семейства шрифтов, включая Adobe Blank, и измерить их ширину, чтобы увидеть, равна ли она нулю, НО вам придется тщательно перебирать каждый глиф и каждый шрифт, который вы хотите протестировать . но хотя вы можете знать шрифты в стеке шрифтов элементов, нет способа узнать, какие шрифты настроены для использования браузером пользователя, поэтому, по крайней мере, для некоторых из ваших пользователей список шрифтов, которые вы перебираете, будет неполным. (Это также не гарантия будущего, если новые шрифты появятся и начнут использоваться.)

Вы можете использовать этот сайт: website-font-analyzer

Он делает именно то, что вы хотите...