JQuery: как получить назначенный шрифт для элемента

Можно ли получить назначенный шрифт элемента в jQuery?

Скажем, есть css:

#element
{
font-family: blahblah,Arial;
}

В приведенном выше примере шрифт Arial будет присвоен #element. Есть ли способ получить эту информацию через JS/JQuery?

Что-то вроде:

$('#element').css('font-family');

возвращает только blahblah,Arial;

Ответ 1

(function($) {
    $.fn.detectFont = function() {
        var fonts = $(this).css('font-family').split(",");
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = element.clone().css({'visibility': 'hidden', 'font-family': font}).appendTo('body');
            if ( element.width() == clone.width() )
                detectedFont = font;
            clone.remove();
        });

       return detectedFont;
    }
})(jQuery);

edit: пришлось удалить клонированный элемент из dom.

Взбив это сейчас, опять же, он по-прежнему зависит от ширины элемента, поэтому ваш пробег может меняться.

$('#element').detectFont(); //outputs Arial

Ответ 2

Вы можете использовать библиотеку Detector для этого: http://www.lalit.org/lab/javascript-css-font-detect/

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

Вот код JS/JQuery:

$(function() {
    var detectFont = function(fonts) {
        var detective = new Detector(), i;
        for (i = 0; i < fonts.length; ++i) {
           if (detective.detect(fonts[i]) !== true) {
               continue
           }
           return fonts[i];
        }    
    }
    var fonts = $('#abcde').css('font-family');
    fonts = fonts.split(',');
    console.log(detectFont(fonts));
});

И вот живая демонстрация, я подготовил: http://jsfiddle.net/netme/pr7qb/1/

Надеюсь, этот подход поможет вам.

Ответ 3

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

/**
 * Detects the font of an element from the font-family css attribute by comparing the font widths on the element
 * @link http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element
 */
(function($) {
    $.fn.detectFont = function() {
        var fontfamily = $(this).css('font-family');
        var fonts = fontfamily.split(',');
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': fontfamily, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            var dummy = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': font, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            //console.log(clone, dummy, fonts, font, clone.width(), dummy.width());
            if ( clone.width() == dummy.width() )
                detectedFont = font;
            clone.remove();
            dummy.remove();
        });

       return detectedFont;
    }
})(jQuery);

Ответ 4

$('#element').css("font-family", "Arial");

Попробуйте это.