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

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

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

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

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

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

Ответов (11)

Решение

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

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

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

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 файлы.

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

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

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

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

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

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

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

например:

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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

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

https://fount.artequalswork.com/

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

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

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

jFont Checker на github