如何通过js判断设备是否支持某种字体

首先，今天在看阮一峰的博客，看到说可以直接通过css属性font-variant-east-asian: traditional;将简体变成繁体，但是点击文章发现是张鑫旭的博文，并且这种方法只有在苹果系列产品中才有比较好的兼容性，支持的字体比较少，这块由于应用到实际工作中的可能性比较小，就先按下不表。

然后我又无意中在张鑫旭的博客中发现js可以用来判断设备是否支持某种字体，这就有点意思了。

他的做法是将文字以指定的字体绘制在canvas上，然后再用默认字体绘制一编，对比两者生成的像素信息（getImageData)，如果一致就是不支持，如果不一致就是支持.

有没有其他办法呢？

其实还有个比较简单的办法是创建两个div, 一个设置为需要检测的目标字体，一个设置为默认字体。将两个div除font-family之外的属性都设成一样。将两个div插入到dom再通过getBoundingClientRect方法获取到两个div的width，大部分情况下两个不同字体的文字的宽度是不一致的。当然，不排除某些不同字体会有一样的字宽，但是这是可以在开发阶段测试出来的，因为你必然知道你的目标字体是什么，那么你只需要尝试一下是否可以运用这种方式解析出来就可以了。

当然，这样的检测方法肯定是不如canvas的检测准确的，但是确实也是一种方法。最主要是，这种方法会比canvas绘制简单。