jquery - 使用 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接受要检查的元素，并使用 getCompulatedStyle 来获取字体列表。它使用 canvas 和 measureText 方法比较 getCompulatedStyle 中的字体宽度，以找出实际在客户端呈现的字体。