为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

跃然一笑 2019-11-15 12:55:20

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


body {

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

}

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


编辑让人不知道为什么要这样做的人:我检测到的字体包含其他字体不可用的字形,并且当用户没有该字体时,我要显示一个链接,要求用户下载该字体,以便他们可以以正确的字体使用我的Web应用程序。


目前,我正在为所有用户显示下载字体链接,我只想为未安装正确字体的用户显示此字体。


查看完整描述

3 回答

?
不负相思意

我已经看到它以一种不稳定但相当可靠的方式完成了。基本上,将元素设置为使用特定字体,并为该元素设置字符串。如果为元素设置的字体不存在,则采用父元素的字体。因此,他们要做的是测量渲染字符串的宽度。如果它与期望字体(与派生字体相对)相符,则表示存在。这不适用于等宽字体。



查看完整回答
反对 回复 2019-11-15
?
繁星coding

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

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


GitHub上的 jFont Checker


查看完整回答
反对 回复 2019-11-15
?
明月笑刀无情

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


查看完整回答
反对 回复 2019-11-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信