[ JQuery ] 폰트설치 여부 확인

참고 : http://using.tistory.com/51

jquery.font.js

솔루션 팀장님께서 자바스크립트로 폰트설치 여부 확인할 수 없냐고 물어보셨다.
나는 당연히 안된다고 얘기를 했다.
자바스크립트는 보안문제로 PC 리소스를 접근할 수 없다 라는 논리였다.
하지만 찾아보니 있더라... jquery.font.js ^^;
해당 라이브러리도 PC 리소스를 접근해서 폰트설치 여부를 확인하는 것은 아니다.

소스를 분석해보니
p태그에 font를 지정 후 해당 p태그의 사이즈를 구한다.
그러면 해당 font가 존재하게 되면 사이즈가 폰트별로 크기가 다르고
폰트가 존재하지 않을 경우 해당 크기는 동일한 사이즈가 나온다.

테스트 결과 모든 브라우저에 동작한다.(솔직히 IE6만 확인했다. ^^;)

jquery.font.js 소스 일부

//default font
var baseX = $("p#jQuery-Font-Test").width();
var baseY = $("p#jQuery-Font-Test").height();
//checking font
var userX = $("p#jQuery-Font-Test").width();
var userY = $("p#jQuery-Font-Test").height();
//사이즈가 같다면 false, 틀리다면 true
return(((userY != baseY) || (userX != baseX))? true: false);

나눔고딕 폰트설치 여부 확인

if ($.font.test("나눔고딕") == false) {
   alert("설치가 되지 않았소!!");
} else {
   alert("설치가 되었소!");
}


다운로드 경로 : https://github.com/beseku/jquery.font