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

Ответ 1

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

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

Ответ 2

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

jFont Checker на github

Ответ 3

@pat На самом деле 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 установлена), в остальном он работает хорошо.

Ответ 4

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

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

/**
 * 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 имеет большое значение.

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

Другим решением было бы установить шрифт автоматически через @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.

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

https://fount.artequalswork.com/

Ответ 11

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

например:.

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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

Ответ 12

Вы можете реализовать шрифты CSS в HTML

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the WOFF format (only supports EOT format).</p>

</body>
</html>