小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个字体范围列表，遍历检测用户支持那些字体，支持哪个字体就增加哪个下拉选项，于是我们的字体配置选项就大大丰富了，体验也就更进一步了。

可以应用的场景示意