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

by zhangxinxu 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');

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

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

测试demo

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

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

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

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

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

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

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

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

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

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

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

三、结束语

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

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

感谢阅读！

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。