使用jQuery检测浏览器选择了哪种字体

Question

CSS中的font-family属性接受字体名称列表，以提供备份选项，以防用户在计算机上没有第一，第二等字体。有没有一种使用jQuery的方法来检测浏览器正在使用哪种字体？

例如，如果我的CSS是：

body {
    font-family: 'SuperCoolFont', 'Foo', 'Bar', 'Arial', 'Comic Sans MS';
}

我想知道浏览器选择了哪个选项。如果用户没有前3个选项，我希望结果为'Arial'。 jQuery有可能吗？

简单测试$('body').css('font-family');会返回整个字体列表。

Answer 1

这有点复杂。

DetectFont接受检查的元素，并使用getComputedStyle获取字体列表。它使用getComputedStyle和canvas方法比较measureText中字体的宽度，以确定在客户端上实际呈现的字体。