除了看,有什么方法可以知道HTML元素当前应用了哪种字体

Question

考虑到我有一个锚标记的CSS规则:

font-family: Helvetica, Verdana, Calibri, Arial, sans-serif;

当然,通过观察浏览器中呈现的内容,我可以判断哪些字体已经被使用(应用)来格式化当前锚元素的文本.

但是,我需要通过JavaScript(例如jQuery)知道当前使用的字体.这个jQuery代码对我没有帮助:

$('#anchor-id').css('font-family');

因为它返回'Helvetica, Verdana, Calibri, Arial, sans-serif;'.有没有办法知道现在哪种字体在运行？

更新:基于@MC回答,我创建了这个小提琴,你可以检查它是否正常工作.

Answer 1

首先,您需要测试是否已安装字体.我在互联网上使用了一些脚本来测试是否安装了字体.

包括这段代码(感谢Lucas Smith):

var Font = {

    isInstalled : function (name) {
        name = name.replace(/['"<>]/g,'');

        var body = document.body;
        var test = document.createElement('div');
        var installed = false;
        var teststring = "mmmmmmmmwwwwwwww";
        var template = '<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">' + teststring + '</b><b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">' + teststring + '</b>';
        var ab;

        if (name) {
            test.innerHTML = template.replace(/X/g, name);
            test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';
            body.insertBefore(test, body.firstChild);
            ab = test.getElementsByTagName('b');
            installed = ab[0].offsetWidth === ab[1].offsetWidth;
            body.removeChild(test);
        }
        return installed;
    }
}

此外,使用以下代码段(我自己编写)来获取font-family值并将该值拆分为多个部分.每个部分都是一种字体,因为它们在CSS代码中用逗号分隔(例如font-family: "Nimbus", "Courier New";):

function workingFont(element) {
    var fontString = $(element).css('font-family');
    var fonts = fontString.split(",");
    for (var f in fonts) {
        if (Font.isInstalled(fonts[f])) {
            return fonts[f];
        }
    }
}

如您所见,将返回第一个安装的字体.

使用workingFont(element),其中element是元素id,类或标记名.这是jQuery API的一部分.请注意,您必须包含jQuery才能使上述脚本正常工作.

更新:我创建了这个jsfiddle来测试它.