小tips: 使用JS检测用户是否安装某font-family字体

2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html

推荐:js检测客户端浏览器是否安装flash插件

[<!--var i_Flash;var v_Flash;// Netscapeif (navigator.plugins) { for (var i=0; i = 0]

这篇文章发布于 2018年02月24日,星期六,00:08,归类于js实例。 阅读 73 次, 今日 73 次

byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7387

本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

一、使用JS判断用户操作系统是否安装某字体

下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码如下:

var isSupportFontFamily=function(f){if(typeof f!="string"){return false}var h="Arial";if(f.toLowerCase()==h.toLowerCase()){return true}var e="a";var d=100;var a=100,i=100;var c=document.createElement("canvas");var b=c.getContext("2d");c.width=a;c.height=i;b.textAlign="center";b.fillStyle="black";b.textBaseline="middle";var g=function(j){b.clearRect(0,0,a,i);b.font=d+"px "+j+", "+h;b.fillText(e,a/2,i/2);var k=b.getImageData(0,0,a,i).data;return[].slice.call(k).filter(function(l){return l!=0})};return g(h).join("")!==g(f).join("")};

语法

isSupportFontFamily(fontFamily);

其中 fontFamily 参数是必须的,为CSS中 font-family 设置的web可识别的字体名称,例如宋体 'simsun' ,微软雅黑 'Microsoft Yahei' 等。

例如,我们要判断用户的操作系统是否安装了微软雅黑字体,可以这么处理:

// isSupportMicrosoftYahei为true或者false
var isSupportMicrosoftYahei = isSupportFontFamily('Microsoft Yahei');

如果用户的操作系统安装了微软雅黑,则 isSupportMicrosoftYaheitrue ,否则为 false

由于本检测方法本质上是基于web检测,因此, fontFamily 参数必须是web可识别的,因此,很多中文字体需要使用其英文名称如“思源黑体”, “兰亭黑体”等,具体名称是什么可以参见我之前的文章:“ CSS font-family常见中文字体对应的英文名称 ”。

测试demo

为了演示上面JS脚本的准确性,我特意制作了一个实例页面,您可以狠狠的点击这里: 一些中文字体系统是否安装检测demo

例如,在我的windows操作系统上,显示效果如下截图所示:

另外,demo页面源代码有未压缩的JavaScript脚本。

实现原理

根据用户设置的字体将某一个字符绘制在 canvas 上( fillText() ),并提取像素信息( getImageData() ),然后和默认字体进行比对,如果像素不一致,说明字体生效,说明字体不生效。

兼容性

IE9+,以及其他所有现代浏览器。

推荐:Ajax js 使用Ajax检测用户名是否存在

[jsp页面: <script type="text/javascript" language="javascript"> var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catc

二、使用JS判断网页是否支持某字体渲染实例

什么场景下需要判断用户的浏览器是否支持某个字体的渲染呢?

例如一些阅读类的场景,希望用户可以自己选择自己喜欢的字体进行设置。对于photoshop,office,keynote等软件,都是直接系统搜刮字体,形成完整而准确的字体下拉。但是web页面并没有这样的权限,因此我们只能曲线救国。例如默认给定50个字体范围列表,遍历检测用户支持那些字体,支持哪个字体就增加哪个下拉选项,于是我们的字体配置选项就大大丰富了,体验也就更进一步了。

您可以狠狠地点击这里: 选择合适的字体进行阅读demo

例如,在我自己windows台式机上,显示了如下图所示的字体列表,这些字体全部都是可以正常渲染的:

例如,我选择一个华文彩云,结果如下图:

三、结束语

经过自己的简单测试,在移动端上效果也是可以的,Android未测。由于此方法是自己突然想到的,目前尚未在实际项目中进行过实践,故并不能保证百分百准确,之后会进一步及时更新信息,也欢迎反馈各类使用问题。

好,就这些,希望本文的内容能够对您的工作学习有所帮助。

感谢阅读!

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: http://www.zhangxinxu.com/wordpress/?p=7387

(本篇完)

推荐:javascript - 能否使用JS判断用户浏览器(Chrome内核)安装了某个插件/应用?

[我们公司开发了一款Chrome应用,老板希望用户访问网页版App时进行检测,如果用户是chrome内核浏览器,并且没有安装我们的Chrome app,那就提醒用户进行安装。 请问这个功

相关推荐