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

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

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

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

Ваш ответ

Отображаемое имя (по желанию):
Конфиденциальность: Ваш электронный адрес будет использоваться только для отправки уведомлений.

12 Ответы

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

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

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

В настоящее время я показывать ссылку на скачивание шрифтов для всех пользователей, я хочу, чтобы отображались только это для людей, которые не установлен нужный шрифт.
0 голосов
от
Я видел, как это делается в какой-то сомнительный, но довольно надежный способ. В принципе, элемент настроен на использование определенного шрифта и строки значение этого элемента. Если шрифт установить для элемента не существует, он принимает шрифта родительского элемента. Так, что они сделать, это измерить ширину отображаемой строки. Если это соответствует тому, что они ожидали нужного шрифта в отличие от производного шрифта, он присутствует. Это не будет работать для моноширинных шрифтов. Вот откуда он взялся: На JavaScript/детектор для CSS шрифт (ajaxian.com; 12 марта 2007)
0 голосов
от
Я написал простой JavaScript-инструментов, что вы можете использовать его, чтобы проверить, если шрифт установлен или нет. Он использует простую технику и должны правильно большую часть времени. шашка jFont на GitHub
0 голосов
от
Упрощенная форма:
function getFont() {
    return document.getElementById('header').style.font;
}
Если вам нужно что-то более полное, зацените.
0 голосов
от
@ПАТ на самом деле, сафари не дает используемый шрифт, сафари, а не всегда возвращает первый шрифт в стеке, независимо от того, установлена, по крайней мере по моему опыту.
font

Если предположить, Гельветика, установлен/используется, вы получите:


"мои поддельные шрифт" в Safari (и я считаю, что другие браузеры на базе webkit).
"мои поддельные шрифт, Гельветика, Сан-засечек" в браузерах движок Gecko и IE. 
"Гельветика" в Opera 9, хотя я читал, что они меняют это в опере 10 до матча
Гецко.


Я взял пропуск на эту проблему и создали шрифт разделять, какие тесты каждый шрифт в стек и возвращает первый установлен только один. Он использует хитрость, что @MojoFilter упоминает, но возвращает только первый если установлено несколько несколько. Хотя она страдает от слабости, что @tlrobinson упоминает (окна заменить Ариал молча Helvetica и сообщить, что установлен шрифт), в противном случае он работает хорошо.
0 голосов
от
Техника, которая работает, чтобы смотреть на вычисленный стиль элемента. Это поддерживается в Opera и Firefox (и я разведал в сафари, но не проверял). Т. е. (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

Если в правило CSS для этого:

#fonttester {
    font

Затем он должен вернуть Helvetica, если это установлено, если нет, Ариал, и, наконец, имя системы по умолчанию без засечек шрифт. Обратите внимание, что заказ шрифты в CSS декларации является значительным.

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

@font

Конечно, это не будет решить любые вопросы авторского права, однако вы всегда можете использовать шрифт, бесплатных или даже сделать свой собственный шрифт. Вам понадобится как .eot
0 голосов
от
Есть простое решение - просто использовать
element.style.font
:
function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}
Эта функция будет в точности делать то, что вы хотите. По исполнению он будет возвращать тип шрифта пользователя/браузера. Надеюсь, что это поможет.
0 голосов
от
Калибри шрифт принадлежит Microsoft, и не должны быть распространены бесплатно. Кроме того, требуя от пользователя для того, чтобы скачать конкретный шрифт не очень удобный. Я хотел бы предложить покупку лицензии для шрифтов и встраивания его в приложения.
0 голосов
от
Я использую кладезь. Вам просто нужно перетащить кнопку кладезь на панель закладок, кликните по нему и щелкните на конкретный текст на сайте. Он будет отображаться шрифт этого текста. https://fount.artequalswork.com/
Добро пожаловать на сайт ByNets, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...