小tips: 使用JS检测用户是否安装某font

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7387 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

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

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

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

如果用户的操作系统安装了微软雅黑，则isSupportMicrosoftYahei为true，否则为false。

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

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

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

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

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

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

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

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

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

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

例如，我选择一个华文彩云，结果如下图：

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

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

感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。 本文地址：http://www.zhangxinxu.com/wordpress/?p=7387

（本篇完）