除了观察，还有什么方法可以知道当前应用于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 的答案，我创建了这个 fiddle，你可以检查它的工作情况非常好。

- Saeed Neamati

---

你为什么需要知道？ - thirtydot

请参考这个问题：https://dev59.com/FHI-5IYBdhLWcg3wO1rl（简而言之，你不能轻易地做到，但有一个技巧可以尝试） - James Allardice

@thirtydot，我只是想知道。 :) 我想基于应用字体做一些业务（统计分析）。更具体地说，我在我的页面上有一个脚本，就像Google Analytics一样，向服务器发送包含当前应用字体信息的ajax请求。 - Saeed Neamati

@sethbrien，我不是设计师:D。我只是在这里写了一个示例。我不知道这个，说实话，我也分不清蓝色和红色的区别;)。 - Saeed Neamati

@seth 因为Arial是来自地狱的私生子！;o) - deceze

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），其中元素是元素ID、类或标记名称。这是 jQuery API 的一部分。请注意，必须包含jQuery才能使上述脚本工作。

更新：我创建了此 jsfiddle 进行测试。

- MC Emperor

---

这是一个好主意，但我不会在严肃的应用程序中信任这个脚本。有太多的机会'ii'字符串在两种不同的字体中具有相同的宽度。选择由许多不同字母组成的较长字符串。 - Rok Kralj

没错。我读过另一个脚本，其中“mmmmmmwwwwwwwwww”是测试字符串。我猜想，使用那个测试字符串，字体宽度很不可能完全相同，对吧？ - MC Emperor

我更喜欢出现更多不同字母的字符串。比方说，你有一个字体，只有一个字母与另一个字体不同。这是一个极端的情况，仅用于演示。 - Rok Kralj

整个字母表怎么样？可以把一些字符加倍或者做些修改吗？ - MC Emperor

@RokKralj 不仅是两种具有相同宽度的字体，而且浏览器将为某些字体系列使用备用字体，例如我的Linux笔记本电脑没有安装Arial或Verdana，但Firefox将为它们中的每一个呈现不同的字体（并且与sans-serif不同）。 - robertc