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

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

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

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

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

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

3.08.2008 21:42:37
Следует иметь в виду, что некоторые браузеры заменяют некоторые отсутствующие шрифты аналогичными шрифтами, что невозможно обнаружить с помощью трюка JavaScript / CSS. Например, браузеры Windows заменят Arial на Helvetica, если он не установлен. Упомянутый трюк MojoFilter и dragonmatank по-прежнему сообщают, что Helvetica установлена, хотя она и не установлена.
tlrobinson 4.08.2008 01:05:30
Небольшое предостережение: если вы предлагаете ссылку для загрузки Calibri, имейте в виду, что, хотя она входит в состав нескольких продуктов Microsoft, это не бесплатный шрифт, и вы нарушаете авторские права, предлагая ее для загрузки.
Adam Hepton 1.09.2008 08:18:20
11 ОТВЕТОВ
РЕШЕНИЕ

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

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

70
22.03.2019 01:21:50
Другой подход , использующий measureTextиз canvasэлемента: github.com/Wildhoney/DetectFont
Wildhoney 24.02.2016 09:35:01

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

jFont Checker на github

33
27.01.2015 09:34:41
Обнаружение шрифта не решает проблему. Вы можете использовать его для итерации объявленных шрифтов и проверки того, что является допустимым, но он дает мало или вообще никакой информации о том, какой шрифт используется для любого данного div. Если вы создаете div из JS, как мы можем узнать, какой шрифт используется?
Jon Lennart Aasenden 31.08.2014 19:55:43
@JonLennartAasenden Чтобы получить используемый шрифт, я полагаю, вы можете использовать свойство «computedStyle» (я забыл точное имя, но это что-то вроде этого.)
Derek 朕會功夫 31.08.2014 20:38:43
Я написал класс, который работает во всех браузерах. Он написан на Smart Pascal, который компилируется в JS, поэтому я не могу опубликовать решение здесь - но вкратце, мне пришлось извлечь строку семейства шрифтов, затем проверить, что каждый шрифт был действительным, взять первый, который был действительным - и это работает везде. Я портировал «детектор шрифтов» на умный паскаль и сделал несколько настроек.
Jon Lennart Aasenden 4.09.2014 18:03:38
@JonLennartAasenden Не похоже, что ваш класс надежен. Браузеры будут проверять каждый шрифт с указанным приоритетом, если он установлен, но иногда предпочитают использовать шрифт с более низким приоритетом в списке, если установленный шрифт с более высоким приоритетом содержит пропущенные символы или глифы, которые не соответствуют запрошенным размерам.
Brandon Elliott 10.07.2016 23:05:46

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

10
14.04.2019 23:44:56

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

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

9
28.01.2013 03:53:54
Это возвращает полную строку CSS, как "Helvetica, Arial, Sans-Serif". Это не возвращает фактический используемый шрифт.
Tom Kincaid 2.10.2013 18:09:44

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

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

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

8
15.01.2013 00:11:46

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

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

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

8
14.04.2019 23:47:22
Я пробую это в Safari на элементе, который определенно имеет шрифт Arial, и я получаю "" в качестве шрифта. Есть идеи, почему?
Alessandro Vermeulen 4.07.2013 08:52:41
Наиболее вероятная причина заключается в том, что это проверяет только установленный шрифт, и если нет установленного шрифта, он, вероятно, использует Arial в качестве шрифта.
Josiah 11.01.2016 19:40:10
@AlessandroVermeulen это потому, что element.style возвращает только значения, установленные в атрибутах стиля, и не будет возвращать никаких значений из других источников (т. Е. Значения из элементов стиля, внешнего CSS или пользовательского агента по умолчанию возвращаться не будут). Этот ответ должен быть удален, потому что он вводит в заблуждение / неправильно. Невероятно, что он получил награду!
brennanyoung 16.05.2019 08:46:53

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

7
7.02.2013 11:22:26

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

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

3
7.02.2013 11:23:58
+1 для встраивания шрифта. Это решает проблему, не обнаруживая ничего.
Andrew Grothe 22.03.2013 15:58:07
Я бы посоветовал проверить Google Fonts на что-то похожее, прежде чем покупать что-либо.
OJFord 20.01.2014 06:56:02
За исключением того, что, если пользователь находится на компьютере с Windows, он может просматривать Calibri. Это весь смысл резервных списков.
dudewad 30.04.2015 22:30:32
И ваш ответ не имеет отношения к вопросу, и должен быть комментарием.
dudewad 30.04.2015 22:31:14

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

https://fount.artequalswork.com/

2
13.03.2017 04:31:09

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

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

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

2
23.06.2017 19:37:57

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

например:

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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

1
30.11.2017 10:58:47