Вопрос:

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

javascript html css fonts

44617 просмотра

11 ответа

28620 Репутация автора

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

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

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

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

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

Автор: Pat Источник Размещён: 03.08.2008 09:42

Ответы (11)


64 плюса

6312 Репутация автора

Решение

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

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

Автор: MojoFilter Размещён: 03.08.2008 09:51

7 плюса

2916 Репутация автора

Техника, которая работает, состоит в том, чтобы посмотреть на вычисленный стиль элемента. Это поддерживается в 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, и, наконец, имя системного шрифта sans-serif по умолчанию. Обратите внимание, что порядок шрифтов в вашем объявлении CSS имеет большое значение.

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

Автор: runeh Размещён: 25.08.2008 10:16

8 плюса

2070 Репутация автора

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

FontUnstack

Автор: philoye Размещён: 20.05.2009 10:57

28 плюса

62312 Репутация автора

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

jFont Checker на github

Автор: Derek 朕會功夫 Размещён: 21.05.2011 05:58

7 плюса

89 Репутация автора

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

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

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

Автор: Facebiz Размещён: 23.10.2011 01:32

8 плюса

1763 Репутация автора

Есть простое решение

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

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

Автор: Naeem Ul Wahhab Размещён: 29.11.2011 08:40

6 плюса

69 Репутация автора

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

Автор: PaulnOZ Размещён: 05.01.2012 11:19

2 плюса

176 Репутация автора

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

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

Автор: Mark Kimitch Размещён: 14.11.2012 06:56

1 плюс

448 Репутация автора

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

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

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

Автор: user2267379 Размещён: 11.04.2015 08:41

0 плюса

2468 Репутация автора

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

https://fount.artequalswork.com/

Автор: Woppi Размещён: 13.03.2017 04:31

0 плюса

11188 Репутация автора

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

например:

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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

Автор: Sam Hasler Размещён: 30.11.2017 10:58
Вопросы из категории :
32x32