javascript - 除了看，还有什么方法可以知道当前在 HTML 元素上应用了哪种字体

Question

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

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

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

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

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

因为它返回 'Helvetica, Verdana, Calibri, Arial, sans-serif;'。有没有办法知道现在使用的是哪种字体？

更新:根据@MC 的回答，我创建了这个 fiddle您可以检查它是否正常工作。

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对其进行测试。