Обнаружение того, какой шрифт использовался на веб-странице

Предположим, у меня есть следующее правило CSS на моей странице:

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

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

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

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

Solutions Collecting From Web of "Обнаружение того, какой шрифт использовался на веб-странице"

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

Вот откуда оно взялось : Javascript / CSS Font Detector (ajaxian.com; 12 марта 2007 г.)

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

jFont Checker на github

Существует простое решение

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

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

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

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

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

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

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

FontUnstack

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

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

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

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

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

 /** * 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 detected */ 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).getPropertyValue("font-family"); } else { return null; } } 

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

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

Затем он должен возвращать helvetica, если это установлено, если нет, arial и, наконец, имя стандартного шрифта sans-serif по умолчанию. Обратите внимание, что упорядочение шрифтов в вашей декларации 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") format("truetype"); } 

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

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

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

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

http://website-font-analyzer.com/

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

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

https://fount.artequalswork.com/

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

например:

 font-family: Arial, 'Adobe Blank'; 

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

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

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

так…

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

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