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

Answer 2

您可以使用检测器库来执行此操作：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/

希望这个方法能对您有所帮助。