9

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

假设有css：

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

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

就像是：

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

只返回blahblah,Arial;

4

4 回答 4

11 
(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

于 2013-03-27T17:32:50.140 回答
3

您可以使用 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/

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

于 2013-03-27T17:24:08.953 回答
2

修改了 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);
于 2014-10-08T09:53:44.677 回答
-5 
$('#element').css("font-family", "Arial");

尝试这个。

于 2013-03-27T19:05:32.500 回答