Помимо просмотра, есть ли способ узнать, какой шрифт применяется в настоящее время в HTML-элементе

Учтите, что у меня есть это правило CSS для тега привязки:

font-family: Helvetica, Verdana, Calibri, Arial, sans-serif;

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

Однако мне нужно знать, какой шрифт используется в настоящее время через JavaScript (например, jQuery). Этот код jQuery мне не помогает:

$('#anchor-id').css('font-family');

потому что он возвращает 'Helvetica, Verdana, Calibri, Arial, sans-serif;'. Есть ли способ узнать, какой шрифт находится в действии сейчас?

Обновление. Основываясь на ответе @MC, я создал этот fiddle, и вы можете проверить, что он работает просто хорошо и довольно.

ОТВЕТЫ

Ответ 1

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

Включите этот фрагмент кода (спасибо Lucas Smith):

var Font = {

    isInstalled : function (name) {
        name = name.replace(/['"<>]/g,'');

        var body = document.body;
        var test = document.createElement('div');
        var installed = false;
        var teststring = "mmmmmmmmwwwwwwww";
        var template = '<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">' + teststring + '</b><b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">' + teststring + '</b>';
        var ab;

        if (name) {
            test.innerHTML = template.replace(/X/g, name);
            test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';
            body.insertBefore(test, body.firstChild);
            ab = test.getElementsByTagName('b');
            installed = ab[0].offsetWidth === ab[1].offsetWidth;
            body.removeChild(test);
        }
        return installed;
    }
}

Кроме того, используйте следующий фрагмент (я написал это сам), чтобы получить значение font-family и разделить это значение на части. Каждая часть является шрифтом, поскольку они разделены запятой в коде CSS (например, font-family: "Nimbus", "Courier New";):

function workingFont(element) {
    var fontString = $(element).css('font-family');
    var fonts = fontString.split(",");
    for (var f in fonts) {
        if (Font.isInstalled(fonts[f])) {
            return fonts[f];
        }
    }
}

Как вы можете видеть, будет возвращен первый установленный шрифт.

Используйте workingFont(element), где element - это идентификатор элемента, класс или тэг. Это часть jQuery API. Обратите внимание, что вы должны включить jQuery, чтобы получить вышеупомянутый script.

Обновление: я создал этот jsfiddle, чтобы проверить его.