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(); //outputs Arial

Answer 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/

希望，这种方法对你有所帮助。

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

Answer 4

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

试试这个。

JQuery：如何为元素分配字体

4 个答案: