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回答，我创建了这个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，class或tagname。这是jQuery API的一部分。 请注意，您必须包含jQuery才能使上述脚本正常工作。

更新：我创建了此jsfiddle来测试它。

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

1 个答案: