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

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

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

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

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

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

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

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

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

jFont Checker на github

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

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

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

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

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

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

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

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

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

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

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

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

https://fount.artequalswork.com/

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

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

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

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

например:

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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