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

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

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

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

jFont чекер на github

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

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

Предполагая, что Helvetica - это тот installed/used,, который вы получите:

• "my fake font" в Safari (и я полагаю, что другие браузеры webkit).
• "my fake font, helvetica, san-serif" в браузерах Gecko и IE.
• "helvetica" в Opera 9, хотя я читал, что они меняют это в Opera 10, чтобы соответствовать Геккон.

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

Метод, который работает, заключается в том, чтобы посмотреть на вычисленный стиль элемента. Это поддерживается в Opera и Firefox (и я Рекон в safari, но еще не тестировал). 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;
}

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

Другим решением было бы установить шрифт автоматически через @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 пустых, и измерять их ширину, чтобы увидеть, равен ли он нулю , BUT вам придется повторять каждый глиф и каждый шрифт, который вы хотите протестировать , но хотя вы можете знать шрифты в стеке шрифтов elements, нет способа узнать, какие шрифты браузер пользователя настроен для использования, поэтому по крайней мере для некоторых ваших пользователей список шрифтов, которые вы повторяете, будет неполным. (Это также не является доказательством будущего, если новые шрифты выходят и начинают использоваться.)