자바스크립트로 폰트설치 여부 확인

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