[그누보드] 나만 빼고 다 아는 웹폰트 사용법(2)
-
웹스터디 /
2011.12.18 00:14 /
hit 5,542 추천
0
- cufon.zip (822.5K) (2) DATE : 2011-12-18 00:14:30
이번엔 웹폰트라고 하기엔 다소 무리가 있는 CUFON 사용법입니다.
이미 많은 분들이 알고 계시고
특히 XE 사용자들은 적극적으로 사용중인 것으로 아는데...그누보드에서는 아직 별다른 언급이 없어서
제가 소개해 봅니다.
CUFON 웹 폰트는 자바스크립트(Javascript)를 이용해서 미리 정의된 글꼴 정보를
캔버스에 그려서 표현하는 방식입니다.
캔버스에 그려서 표현하는 방식입니다.
따라서 본문 전체에 사용하기에는 조금 부적당한데 이유는 브라우저가 웹 글꼴을 해석하는데 시간이 걸리며
글자가 많으면 사양이 낮은 시스템에서는 조금 무리가 되기 때문입니다.
글자가 많으면 사양이 낮은 시스템에서는 조금 무리가 되기 때문입니다.
하지만 제목이나 로고등에 사용하면 시스템 부담도 별로 없기 때문에 전 매우 자주 사용합니다.
(다만 사이트 속도에 대한 부담감으로 사용을 기피하는 개발자도 많이 있더군요.)
(다만 사이트 속도에 대한 부담감으로 사용을 기피하는 개발자도 많이 있더군요.)
cufon의 장점은 개인적으로 마음에 드는 글꼴을 단순하고 편하게 웹 글꼴을 만들 수 있다는 점입니다.
오늘은 cufon 글꼴을 만드는 방법에 대해서는 언급하지 않겠습니다.
( 그 이유는...실제로 cufon 웹글꼴을 만들어 쓰는데 있어서 몇몇 애로사항이 꽃피기 때문입니다.)
오늘은 cufon 글꼴을 만드는 방법에 대해서는 언급하지 않겠습니다.
( 그 이유는...실제로 cufon 웹글꼴을 만들어 쓰는데 있어서 몇몇 애로사항이 꽃피기 때문입니다.)
그냥 남들이 만들어 놓은 cufon 폰트를 잘 이용하는 방법에 대해서만 설명 드리겠습니다.
1. 먼저 첨부파일을 다운받아 그누보드의 js 폴더에 업로드 합니다.
압축파일 목록
- cufon-yui.js (1.09i) ( http://cufon.shoqolate.com/generate/ )
- RixHead_M_400.font.js (릭스고딕 M)
- NanumGothic_400.font.js (나눔고딕)
- NanumGothic_600.font.js (나눔고딕 굵은체)
압축파일 목록
- cufon-yui.js (1.09i) ( http://cufon.shoqolate.com/generate/ )
- RixHead_M_400.font.js (릭스고딕 M)
- NanumGothic_400.font.js (나눔고딕)
- NanumGothic_600.font.js (나눔고딕 굵은체)
2. head.sub.php 의 <head>와 </head> 사이에 아래처럼 소스 추가합니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/RixHead_M_400.font.js"></script>
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title', {
hover: true,
fontFamily: 'RixHead M'
});
</script><!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
일단 위처럼 하시면 cufon 폰트 (RIX 고딕 M) 을 사용하기 위한 준비는 다 되었습니다.
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title', {
hover: true,
fontFamily: 'RixHead M'
});
</script>
위에서 .title 에 cufon을 적용하겠다고 정의 했기 때문에 class="title" 처럼
클래스가 title 인곳은 전부 cufon 폰트로 대치되어 나옵니다.
만약 다른 클래스에도 추가하고 싶으시면...
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title, .board_list th, .board_list td.subject, #header, .footer', {
hover: true,
fontFamily: 'RixHead M'
});
</script>
이런 형태로 계속 추가하면 됩니다.
(처음에도 언급했지만...너무 많은 곳에 사용되면 페이지가 버벅댑니다.)
즉, <div class="title">제목글자</div> 이런형태대로 사용하면 됩니다.
첨부파일에 동봉된 나눔고딕을 사용할때는
fontFamily: 'NanumGothic'로 바꿔서 사용해야 하며
fontFamily: 의 이름은 각각의 js 파일에 정의되어 있습니다.
위 링크의 페이지를 봤을때
상단메뉴에 나온 모든 글자가 cufon 폰트이며
[슬라이드 판넬 최근게시물] 이라고 쓰인 큰제목은 아래글에 설명된 WOFF 웹폰트이고
다시 슬라이드 되는 이미지 제목도 cufon 폰트입니다.
--------------------------------------------------------------------------------------
<script type="text/javascript" src="<?=$g4[path]?>/js/jquery-1.4.2.min.js"></script>
head.sub.php 에 있는 위 라인을
<title><?=$g4['title']?></title>바로 아래로 옮기시고
그 아래에 cufon-yui 스크립트를 불러오셔야 합니다.
즉 순서가...
.
.
<script type="text/javascript" src="<?=$g4[path]?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/RixHead_M_400.font.js"></script>
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title', {
hover: true,
fontFamily: 'RixHead M'
});
</script>
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
이렇게 되어야 합니다.
head.sub.php 에 있는 위 라인을
<title><?=$g4['title']?></title>바로 아래로 옮기시고
그 아래에 cufon-yui 스크립트를 불러오셔야 합니다.
즉 순서가...
.
.
<script type="text/javascript" src="<?=$g4[path]?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/RixHead_M_400.font.js"></script>
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title', {
hover: true,
fontFamily: 'RixHead M'
});
</script>
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
이렇게 되어야 합니다.
미나
2012.02.22 15:59:06
임성종
2013.06.17 20:14:07