15

考虑到我有一个用于锚标记的 CSS 规则：

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

当然，通过查看浏览器中呈现的内容，我可以判断哪些字体已经被使用（应用）来格式化当前锚元素的文本。

但是，我需要通过 JavaScript（例如 jQuery）知道当前正在使用哪种字体。这个 jQuery 代码对我没有帮助：

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

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

更新：根据@MC 的回答，我创建了这个小提琴，你可以检查它是否工作得很好。

4

1 回答 1

8

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

在某些地方包含这段代码（感谢 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来测试它。

于 2011-09-06T10:10:53.037 回答