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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Устройство Проверки jFont на github

Answer 3

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

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

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

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

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

Answer 4

Упрощенная форма представляет собой:

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

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

Answer 5

Метод, который работает, заключается в том, чтобы посмотреть на вычисляемый стиль элемента.Это поддерживается в 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 и, наконец, название системного шрифта без засечек по умолчанию.Обратите внимание, что порядок шрифтов в вашем объявлении 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.Вам просто нужно перетащить кнопку "Найти" на панель закладок, нажать на нее, а затем щелкнуть по определенному тексту на веб-сайте.Затем он покажет шрифт этого текста.

https://fount.artequalswork.com/

Answer 10

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

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

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

Answer 11

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

например ,:

font-family: Arial, 'Adobe Blank';

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

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

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

итак...

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

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