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

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

15 голосов
/ 05 сентября 2011

Учтите, что у меня есть это правило 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 Ответ

8 голосов
/ 06 сентября 2011

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

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

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.

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

...