'cufon'에 해당되는 글 2건

Howto

전편에 이어서..

 

1. 다운받은 파일의 확장자는 .js여야 합니다. 일단 소중하게 보관합니다.

 

2. 상단 메뉴 중의 download 에 오른클릭하고, 링크된 파일을 저장합니다. 파일의 이름은 cufon-yui.js가 됩니다.

3. 티스토리에 두 파일을 모두 업로드합니다.

 

4. 소스를 수정합니다.

cufon의 방식은 자바스크립트를 이용한 것이기 때문에 많은 자원을 사용합니다. 따라서 제목 글씨 정도에만 사용해주는 것이 좋습니다.

skin.html의 <head>태그와  </head>태그 사이에 다음과 같은 내용을 입력합니다.

 

<script src="./images/cufon-yui.js" type="text/javascript"></script>

<script src="./images/자기의 폰트파일이름.js" type="text/javascript"></script>

 

그다음, 다음과 같은 내용을 입력합니다.

<script type="text/javascript">
			Cufon.replace('h1');
</script>

 

이렇게 하면, 이제 <h1>태그 사이에 있는 내용들은 모두 cufon에서 제작한 웹폰트로 대체되게 됩니다.

 

5. 적용하고 싶은 제목 치환자를 찾습니다. 일반적으로 티스토리에서는

 

##_notice_rep_title_##

##_article_rep_title_##

'##_list_conform_##'에 해당되는 글 ##_list_count_##건

 

등입니다. (guest나 tag의 제목들도 물론 해당됩니다.)

 

이것을을 찾아서,

 h1 태그로 감싸주면 됩니다.

ex)  <h1>GUEST BOARD</h1> 

그럼 멋진 웹 폰트를 적용할 수 있게 됩니다.

 

6. 크기를 조절하려면, style.css에서 다음과 같은 부분을 추가합니다.

h1 { font-size : 쓰고싶은 크기px}

 

신고
6 0
Howto

사실, 맥에서는 따로 트루타입 웹 폰트 솔루션이 필요하지 않습니다.

맥에서 주로 쓰는 사파리, 크롬, 파폭은 모두 자동 업데이트가 되기 때문에 항상 최신버전이 유지되고,

최신버전 브라우저들은 기본적으로 TTF를 이용한 웹 폰트 명령어 를 지원하기 때문이지요.

더군다나 Lion에서부터는 나눔폰트가 기본으로 들어있는데다 폰트 출력이 굉장히 미려하기 때문에,

마치 그림으로 만든 것 처럼 깔끔하게 나옵니다. 윈도우에서는 상상도 할 수 없는 일이지요.

 

 

진짜로 웹브라우저에서 이렇게 나옴 ㅎ

 

http://catntuna.tistory.com/43

이 그림을 캡쳐한 포스팅의  주소입니다. 한 번 씩 가셔서 그림처럼 나오는지 확인해 보세요.

윈도우에서 사파리가 아닌 브라우저를 쓰시는 분이라면, 컴퓨터를 부수고싶어지실 거에요.

어쨌든, 대다수의 웹 사용자들은 윈도우를 사용하고, IE도 상당히 구버전을 사용합니다.

윈도우+IE환경에서 한글폰트는 특별히 못생기게 나옵니다. 이때문에 많은 웹 관련 종사자들이 골머리를 앓고 있습니다.

 

외국에서도 브라우저에서 트루타입 폰트가 제대로 표시되지 않는 문제 때문에, 많은 웹폰트 솔루션이 등장했었습니다.

설치형 블로그를 쓰는 사람은 php+GD조합으로 폰트를 그림으로 사용하는 편리한 방법을 쓰기도 했지만,

티스토리에서는 GD라이브러리도 없고, php업로드도 불가하기 때문에 전혀 불가능합니다.

 

어쨌든, 웹폰트 솔루션 중에서 가장 많이 알려지고, 편리하게 사용할 수 있는 Cufon을 소개합니다.

한 단계 한 단계 거치면서 내 블로그에 제목으로 쓸 수 있는 웹폰트를 만들고 적용하는데까지 진행해 보겠습니다. (safari에서 진행하겠습니다.)

일단 이 링크를 클릭하세요

http://cufon.shoqolate.com/generate/

 

이런 페이지가 뜹니다.

 

먼저 자신이 쓸 폰트 파일을 올려야겠지요.

이 부분을 봅니다.

 

외국 폰트들은 변환할 문자가 몇 개 되지 않기 때문에 (숫자,기호, 알파벳) 용량이 상당히 작아서 이탤릭이나 볼드도 쉽게 추가 가능하지만,

한글 폰트는 기본만 올려도 1메가에 육박하는 용량을 가집니다. 따라서 Regular typeface에만 폰트를 올리는 것을 추천합니다.

 

아시다시피 모든 폰트에는 저작권이 있습니다.

cufon을 통한 폰트 변환은 뭐 저작권 문제가 상당히 복잡한데요,  어쨌든 모든 상용폰트는 불가하고, 무료 폰트 중에서도 사용할 수 있는 폰트가 한정되어 있습니다.

나눔 폰트는 변환이 가능한 라이센스라 알려져 있기 때문에, 나눔 폰트로 진행을 해 보겠습니다. 다음폰트는 불가하다 알려져 있습니다.

(나눔폰트, 서울체, 기타 자유로이 배포가 가능하고 기업사용자들에게도 자유로운 라이센스를 가진 폰트들을 검색해 보세요.)

 

1. 나눔폰트중에 변환하고 싶은 폰트의 ttf파일을 Regular typeface에 올립니다.

 

2. 그다음, 라이센스란에 체크합니다.

 

3. 사용할 문자셋을 정해줘야합니다. 이 부분이 어렵습니다.

 

웹페이지의 폼을 개조하여 사용해야 하기 때문입니다.

그 이유는 cufon사이트에서 기본으로 제공하는 input은 256글자의 한계가 있으며,  이만큼으로는 변환할 문자셋의 ㄱ도 끝내는 것이 불가능하기 때문입니다.

 

Firefox의 경우 Firebug를 이용하십시오. (확장 프로그램입니다.) 사파리나 IE9의 경우 내장되어 있습니다.
제가 윈도우 컴퓨터가 없기 때문에 IE에서 수정하는 법을 모르겠으니 사파리를 이용하는 것을 추천드립니다.

1)  사파리의 설정->고급 탭에서 '메뉴 막대에서 개발자용 메뉴 보기' 를 선택합니다.

 

2) 개발자용 메뉴에서, 웹 속성 보기를 선택합니다.

 

3) 요소 -> 돋보기 -> .. and also these single characters 밑의 input form을 찾습니다.

 

4) input 부분이 자동으로 하이라이트 되면, input을 더블클릭하여 편집합니다.

 

5) input -> textarea로 바꿉니다.

 

 

6) input폼이 textarea폼으로 바뀝니다.

 

7) maxlength 를 적당한 값으로 바꿔줍니다.

 

 

8) 바뀐 폼에 과거 웹폰트용으로 사용되었던 subset을 넣습니다.  첨부파일된 텍스트 파일의 내용을 복사해서 붙여넣기 하시면 됩니다.

 

4. 나머지 옵션은 건드실 필요 없고, 라이센스에 체크하신 후 Let's do this 합니다.

5. 다운로드에 파일이 받아집니다.

 

...2부에 계속.

신고
1
블로그 이미지

린스네 집

고양이와 참치

티스토리 툴바