나만 빼고 다 아는 웹폰트 사용법(2)
나만 빼고 다 아는 웹폰트 사용법(2)
이번엔 웹폰트라고 하기엔 다소 무리가 있는 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 폰트입니다.
기타 추가 내용은 시간날 때 다시 한번 정리해서 올려 보겠습니다.
추천하시는 분은 이뻐~~
첨부파일
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 20개
그렇지 않아도 고민하고 있었는데..
혹시..상단 메뉴(home, 공개용 스킨작업등등)들과 좌측 하단부분 타이틀(마지막은 언제나 장난감 쇼핑)도 모두 위와같은 웹폰트로 적용이 된건가요?
전부 cufon이 적용된 상태입니다.
글자크기, 폰트, 스타일등은 일반 css 처럼 똑같이 적용하면 됩니다.
예를 들어 위의 .title 클래스에
.title {color:#333; font-size:18px;}
.title a {color: #f60;}
.title a:hover {color: #f00;}
이 처럼 적용하면 됩니다. 즉 글자체만 cufon에서 적용시킨대로 나오며
다른 부분은 일반적인 css 형태대로 지정하면 됩니다.
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
이 부분을 안적으셨다면 IE9에서 해당부분에 글자가 아예 안보이게 됩니다.
샘플페이지를 보시면 IE9를 비롯한 모든 브라우저에서 잘 나오는거 확인될 거에요^^;;
찬찬히 다시 적용해보시길 바랍니다.
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
죄송합니다. 계속 질문드려서요 적용을 시켰는데도 안나오네요...
http://www.mapleyuhak.com/sub/sub01.php 이페이지를 보시면
내게 맞는 학교를 검색한다.에 적용한 상태인데 안먹네요 마지막으로 답변 좀 부탁드리겠습니다. 감사합니다.
요즘 그누보드에는 기본적으로 제이쿼리(1.4.2)가 포함되어 있어 따로 설명을 드리지 않은 것입니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
이 라인 하나 추가해 넣어보세요.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.4.2.min.js"></script>
위에 꺼 아인가요? 이건 기존에 있었는데요..
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>여하튼 시하님 말씀대로 적용을 시켰는데도 안나오네요..이유가 뭘까요...
<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]-->
이렇게 되어야 합니다.
좋은정보 같사합니다.^^
개인적인 사용이 아니라면 릭스고딕 서체 사용은 말리고 싶네요.