假设我的页面中有以下CSS规则：

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

如何检测用户浏览器中使用了哪种定义的字体？

编辑让人不知道为什么要这样做的人：我检测到的字体包含其他字体不可用的字形，并且当用户没有该字体时，我要显示一个链接，要求用户下载该字体，以便他们可以以正确的字体使用我的Web应用程序。

目前，我正在为所有用户显示下载字体链接，我只想为未安装正确字体的人显示此字体。

解决方案：

我已经看到它以一种不稳定但相当可靠的方式完成了。基本上，将元素设置为使用特定字体，并为该元素设置字符串。如果为元素设置的字体不存在，则采用父元素的字体。因此，他们要做的是测量渲染字符串的宽度。如果它与期望字体(与派生字体相对)相符，则表示存在。

这是它的来源：
Javascript / CSS字体检测器(ajaxian.com; 2007年3月12日)

一种有效的技术是查看元素的计算样式。 Opera和Firefox支持此功能(我在Safari中进行了侦察，但尚未测试)。 IE(至少为7)提供了一种获取样式的方法，但似乎是样式表中的内容，而不是计算出的样式。有关quirksmode的更多详细信息：获取样式

这是获取元素中使用的字体的简单函数：

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

如果CSS规则是：

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

然后，如果已安装helvetica，则应返回helvetica，如果未安装，则返回arial，最后返回系统默认的sans-serif字体的名称。请注意，CSS声明中的字体顺序很重要。

我们也可以尝试的一个有趣的技巧是创建具有许多不同字体的许多隐藏元素，以尝试检测计算机上安装了哪些字体。我确信有人可以用这种技术制作一个漂亮的字体统计信息收集页面。

@pat实际上，Safari不会提供所使用的字体，至少我认为，无论是否安装了Safari，Safari始终会返回堆栈中的第一个字体。

font-family: "my fake font", helvetica, san-serif;

假设Helvetica是已安装/已使用的设备，我们将获得：

Safari(我相信其他Webkit浏览器)中的"我的假字体"。 Gecko浏览器和IE中的"我的假字体helvetica san-serif"。 Opera 9中的" helvetica"，尽管我读到他们正在Opera 10中对其进行更改以匹配Gecko。

我通过了这个问题，并创建了Font Unstack，它测试堆栈中的每种字体并仅返回第一个已安装的字体。它使用@MojoFilter提到的技巧，但是如果安装了多个，则仅返回第一个。尽管它确实遭受了@tlrobinson提到的弱点(Windows将用Arial代替Helvetica并报告已安装Helvetica)，但它还是可以正常工作的。

FontUnstack