这个项目可以帮助你在检测电脑上已经安装的字体文件里,哪些字体无法被用于商业用途。
原理
在前端,你没法直接读取电脑上已经安装的字体列表,这是一个权限安全的问题。
因此需要借助一个取巧的方式,通过 CSS 来搞定它。
function CheckFont(t) {
if (t == "") { return "" };
var f = "他们给我说这个东西越长就越精准我特别想试试ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrsyuvwxyz1234567890";
var s = document.createElement("span");
s.style.fontSize = '72px';
s.innerHTML = f;
var b = document.getElementsByTagName("body")[0];
b.appendChild(s);
s.style.fontFamily = f;
var w = s.offsetWidth;
var h = s.offsetHeight;
s.style.fontFamily = t + ',' + f;
var r = ((s.offsetWidth != w) || (s.offsetHeight != h));
b.removeChild(s);
return r ? true : false;
}
如你所见,创建一个元素,假如当前电脑不存在这个字体,则它的offsetWidth和offsetHeight会和字体存在时的值不同。
理论上来说,只要元素足够大,内容足够多,就可以判断出一个字体是否存在。
虽然上面的代码是JavaScript,然而它其实是通过CSS中的offsetWidth和offsetHeight去判断的。