首页 ❯

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

javascript html css fonts
2022-08-30 02:40:15

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

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

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

对于想知道我为什么要这样做的人来说，因为我检测到的字体包含其他字体中不可用的字形。如果用户没有该字体，则我希望它显示一个链接，要求用户下载该字体（以便他们可以使用具有正确字体的Web应用程序）。

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


答案 1

我看到它以一种令人讨厌的，但非常可靠的方式完成。基本上，将元素设置为使用特定字体，并将字符串设置为该元素。如果为该元素设置的字体不存在，则它采用父元素的字体。因此，他们所做的是测量呈现的字符串的宽度。如果它与他们对所需字体的期望相匹配，而不是派生字体，则它存在。这不适用于等宽字体。

以下是它的来源： Javascript/CSS Font Detector （ajaxian.com; 12 Mar 2007）


答案 2

我写了一个简单的 JavaScript 工具，你可以用它来检查是否安装了字体。
它使用简单的技术，大多数时候应该是正确的。

jFont Checker on github


推荐
更多 »
标签
更多 »
php pass-by-reference optional-parameters default-value javascript arrays dom function string object serialization tostring visibility syntax jslint use-strict operators equality equality-operator identity-operator datetime timestamp date-arithmetic redirect angularjs loops foreach iteration scope variables
推荐
更多 »