假设我的页面中有以下 CSS 规则：
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
如何检测用户浏览器中使用了哪一种定义的字体？
对于想知道我为什么要这样做的人来说，因为我检测的字体包含其他字体中不可用的字形。如果用户不具备的字体，那么我希望它显示一个链接，要求用户下载该字体（这样他们就可以用我的web应用程序与正确的字体）。
目前，我正在为所有用户显示下载字体链接。我只想为没有安装正确字体的人显示这个。
我已经看到它以一种不确定但非常可靠的方式完成。基本上，一个元素被设置为使用特定的字体，并且一个字符串被设置为该元素。如果为元素设置的字体不存在，则采用父元素的字体。所以，他们所做的是测量渲染字符串的宽度。如果它与他们对所需字体的预期相匹配，而不是派生字体，则它存在。这不适用于等宽字体。
我写了一个简单的 JavaScript 工具，你可以用它来检查是否安装了字体。
它使用简单的技术，在大多数情况下应该是正确的。
github 上的jFont 检查器
@pat 实际上，Safari 没有提供使用的字体，Safari 总是返回堆栈中的第一个字体，无论是否安装，至少在我的经验中是这样。
font-family: "my fake font", helvetica, san-serif;
假设 Helvetica 是安装/使用的那个，你会得到：
我解决了这个问题并创建了Font Unstack，它测试堆栈中的每个字体并仅返回第一个安装的字体。它使用@MojoFilter 提到的技巧，但如果安装了多个，则只返回第一个。尽管它确实存在@tlrobinson 提到的弱点（Windows 将默默地用 Arial 代替 Helvetica 并报告已安装 Helvetica），但它在其他方面运行良好。
一种有效的技术是查看元素的计算样式。这在 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，如果未安装，则返回 arial，最后返回系统默认 sans-serif 字体的名称。请注意，CSS 声明中字体的顺序很重要。
您还可以尝试的一个有趣的技巧是创建许多具有许多不同字体的隐藏元素，以尝试检测机器上安装了哪些字体。我相信有人可以用这种技术制作一个漂亮的字体统计信息收集页面。
一个简化的形式是：
function getFont() {
return document.getElementById('header').style.font;
}
如果您需要更完整的内容，请查看此内容。