javascript - JQuery:如何为元素分配字体

Question

是否可以在 jQuery 中检索元素的指定字体？

假设有 css:

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

在上面的示例中，Arial 字体将分配给#element。有没有办法通过 JS/JQuery 获取该信息？

类似于:

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

只返回 blahblah,Arial;

Answer 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);

编辑:必须从 dom 中删除克隆的元素。

刚才再说一遍，它仍然依赖于元素宽度 - 所以你的里程可能会有所不同。

$('#element').detectFont();//输出宋体