Обнаруживая, какой шрифт был использован на веб-странице

голоса
110

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

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

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

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

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

Задан 03/08/2008 в 22:42
источник пользователем
На других языках...                            


11 ответов

голоса
59

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

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

Ответил 03/08/2008 d 22:51
источник пользователем

голоса
27

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

jFont проверки на GitHub

Ответил 21/05/2011 d 18:58
источник пользователем

голоса
7

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

FontUnstack

Ответил 20/05/2009 d 11:57
источник пользователем

голоса
6

Существует простое решение

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

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

Ответил 29/11/2011 d 09:40
источник пользователем

голоса
6

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

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

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

Ответил 23/10/2011 d 14:32
источник пользователем

голоса
6

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

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

Ответил 25/08/2008 d 23:16
источник пользователем

голоса
5

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

Ответил 05/01/2012 d 12:19
источник пользователем

голоса
2

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

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

Ответил 14/11/2012 d 19:56
источник пользователем

голоса
1

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

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

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

Ответил 11/04/2015 d 20:41
источник пользователем

голоса
0

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

например:

font-family: Arial, 'Adobe Blank';

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

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

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

так...

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

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

Ответил 30/11/2017 d 10:58
источник пользователем

голоса
0

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

https://fount.artequalswork.com/

Ответил 13/03/2017 d 04:31
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more