사용되는 라이브러리는 jquery.font 다. 이놈은 사용자가 해당 글꼴을 갖고 있는지 감지해 준다.
이 글을 찾아 오신 분들 중에는 Cufon이 뭔지 모르는 분이 없을 거라 생각한다. (Cufon은 텍스트를 받아 글자를 그려 주는 라이브러리다.)
아래 함수를 이용하면, 나눔고딕이나 맑은 고딕 글꼴이 있는 경우 Cufon을 아예 건너뛰게 된다. 당연히 트래픽이 절약된다.(나눔고딕은 붙여 쓰고, 맑은 고딕은 띄어 쓴다.)
function iHaveFont(){
return ($.font.test('나눔고딕') == true || $.font.test('맑은 고딕') == true);
}
if(iHaveFont() == false){
$('<script/>',{
type: 'text/javasript',
src: '/js-lib/cufon/cufon.js'
}).appendTo('head');
$('<script/>',{
type: 'text/javasript',
src: '/js-lib/cufon/NanumGothic_600.font.js'
}).appendTo('head');
}
$(document).ready(function() {
if(iHaveFont() == false){
Cufon.replace('.cufon');
}
});
가운데 있는 if문 안에 있는 코드는 script를 생성하는 방법이다. 이 방법은 ‘[번역] 아름답게 jQuery 엘리먼트 생성하기 Beautiful Element Creation with jQuery’에 잘 설명돼 있다.
내가 맨 처음 제시한 방법은 document.write('<script type="text/javascript" src="..."></script>') 형식으로 직접 코드를 쓰는 방식이었다. 그러나 이 방법을 사용하니까, 불러오지 않아도 되는 조건인데도 자바스크립트 파일을 불러오는 것이었다. 그래서 방식을 바꿨다.
참고사항
Cufon의 트래픽을 절약하기 위해서 js와 css를 압축해 내보내는 방법도 참고할 만하다.
만약 PHP4를 사용하는 사람이라면 내가 설명한 편법을 사용하는 것도 괜찮은 해법이 된다.
댓글 남기기