如何检测网页中使用了哪种定义的字体？

Question

假设我的页面中有以下CSS规则：body {    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;}如何检测用户浏览器中使用了哪种定义的字体？编辑让人不知道为什么要这样做的人：我检测到的字体包含其他字体不可用的字形，并且当用户没有该字体时，我要显示一个链接，要求用户下载该字体，以便他们可以以正确的字体使用我的Web应用程序。目前，我正在为所有用户显示下载字体链接，我只想为未安装正确字体的用户显示此字体。

Answer 1

我写了一个简单的JavaScript工具，您可以用它来检查是否安装了字体。

它使用简单的技术，并且在大多数情况下应该是正确的。

GitHub上的 jFont Checker

Answer 2

实际上，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），但它还是可以正常工作的。