JMBack

홈페이지는 그 내용에 관계없이 텍스트가 디자인의 팔할을 차지하게 된다.

영문은 폰트 제작이 간편하고 기본 폰트도 선택 폭이 넓은 편이지만

웹상에서 사용할 수 있는 한글로 된 기본 폰트는 3~4개 뿐이다.

그리고 메뉴 버튼은 보통 이쁜 폰트로 만들어서 이미지로 찍어내기 때문에

굴림이나 돋움같은 기본 폰트와 조화되지 않는 경우가 허다하다.
 

그래서 

일반적으로 두가지 방법으로 해결한다.

1.텍스트를 이미지로 변환

2.웹폰트 사용

1. 워드프로세서에서 내용을 작성하고 PDF로 저장해서 포토샵으로 다시 이미지 파일로 전환하는 방법. 워드프로세서에서 편집한 디자인 그대로 올릴 수 있어서 깔끔하지만 내용 수정할때마다 이 과정을 거쳐야 하는 불편함을 겪어야 하고 검색을 포기해야 한다. 문서 내에서 링크를 거는 것도 불편하다.(웹에디터를 통해 이미지 링크를 걸면 가능하기는 하다.)

2.웹폰트 사용

웹폰트를 사용하면 1번의 문제가 대부분 해결 가능하다. 링크 적용, 검색 가능, 수정 간편.

웹폰트에는 3종류가 있다.

1. woff : Web Open Font Format 위키에서 설명 보기
 2. ttf : True Type Font 위키에서 설명 보기
 3. eot : Embedded OpenType 위키에서 설명 보기[각주:1]

각 브라우저에 따라 지원하는 웹폰트가 다르다.

간단하게 설명하자면

woff 방식은 웹 표준방식이다. 하지만 한국에서는 별로 중요치 않다.

ttf 는 용량이 크다.

eot는 익스플로러에서 잘 먹힌다.

웹표준을 다 지켜준다면 좋겠지만 그렇지 않기 때문에 사이트 제작하는 입장에서는 모두 고려해야 한다. eot와 woff 모두 표시하도록 하면 대부분의 브라우저에서 가능하다.

• 일반적인 사용법.

<style type="text/css">
@font-face {font-family: 폰트 이름; src:url(폰트 위치);}
body {font-family:폰트 이름; font-size: 12px:}
</style>

폰트를 업로드 하고 CSS에 이상의 코드를 넣어주면 전체 페이지에 적용된다.

특정 부분에 사용하려면 body 부분을 바꿔주면 된다.

• 스마트 에디터

나는 사이트 페이지 작성에 스마트에디터(smart editor)를 사용했기 때문에 조금 다른 방법을 사용했다.

SEditorSkin.html에서 아래처럼 추가하고요. <option value="ganari" style="font-family:ganari">개나리</option> 

css/style.css에 @font-face { FONT-FAMILY:ganari; src:url('../webfont/ganari.eot');} ^[각주:2]

스마트 에디터 네이버 개발자 포럼에서 찾았다. '개나리'라는 폰트를 쓴 사례. 이상과 같이 하면 에디터에서 설정할 수 있는 글꼴에 개나리가 추가된다.

크로스 브라우징을 신경쓰지 않으면 이상 두가지 방법만 적용하면 끝.

크로스 브라우징을 위해 많은 사람들이 해결책으로 제시하는 방법이 있다.

fontface.kr 구글 API를 이용해서 뜻있는 분들이 만들어 놓으신 사이트다.

나도 여길 이용해서 나눔고딕체를 스마트 에디터에 적용했다.

<script src="http://www.google.com/jsapi"></script>

<script>

 google.load( "webfont", "1" );

 google.setOnLoadCallback(function() {

  WebFont.load({ custom: {

   families: [ "NanumGothic" ],

   urls: [ "http://fontface.kr/NanumGothic/css" ]

 }});

});

</script>^[각주:3]

<option value="NanumGothic" style="font-family:NanumGothic">나눔고딕</option>

body에 여러 폰트 옵션에 추가해주면 끝.

크로스 브라우징이 분명 된다고 했는데 크롬에서 안보이고 있다.

xp라서 안된다는 듯 하다.