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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

jFont Checker на github

Answer 3

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

Answer 4

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

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

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

Answer 5

Техника, которая работает, состоит в том, чтобы посмотреть на вычисленный стиль элемента. Это поддерживается в 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 имеет большое значение.

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

https://fount.artequalswork.com/

Answer 10

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

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

Это именно то, что вы хотите ...