나눔고딕으로 Cufon 적용 후, 나눔고딕이나 맑은 고딕이 있는 사람에게는 적용하지 않기

,

사용되는 라이브러리는 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를 사용하는 사람이라면 내가 설명한 편법을 사용하는 것도 괜찮은 해법이 된다.

카테고리 글 목록 👉

,

대표글

“나눔고딕으로 Cufon 적용 후, 나눔고딕이나 맑은 고딕이 있는 사람에게는 적용하지 않기” 에 하나의 답글

  1. […] 나눔고딕 cufon을 minify로 압축하고, 글꼴을 가진 경우에는 cufon을 적용하지 않으며, 캐시를 사용하는 방법이 있다. 그러면 300kb 정도로 용량을 줄일 수 […]

댓글 남기기