卷起來(lái)了！軟件開(kāi)發(fā)正在越來(lái)越快……>>>>>>

這個(gè)項(xiàng)目可以幫助你在檢測(cè)電腦上已經(jīng)安裝的字體文件里，哪些字體無(wú)法被用于商業(yè)用途。

原理

在前端，你沒(méi)法直接讀取電腦上已經(jīng)安裝的字體列表，這是一個(gè)權(quán)限安全的問(wèn)題。

因此需要借助一個(gè)取巧的方式，通過(guò) CSS 來(lái)搞定它。

function CheckFont(t) {
? ? if (t == "") { return "" };
? ? var f = "他們給我說(shuō)這個(gè)東西越長(zhǎng)就越精準(zhǔn)我特別想試試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;
}

如你所見(jiàn)，創(chuàng)建一個(gè)元素，假如當(dāng)前電腦不存在這個(gè)字體，則它的offsetWidth和offsetHeight會(huì)和字體存在時(shí)的值不同。

理論上來(lái)說(shuō)，只要元素足夠大，內(nèi)容足夠多，就可以判斷出一個(gè)字體是否存在。

雖然上面的代碼是JavaScript，然而它其實(shí)是通過(guò)CSS中的offsetWidth和offsetHeight去判斷的。