웹폰트의 정의
1. 웹폰트란, 웹페이지에 글꼴이 설치되어 있지 않아도 특정 글꼴로 볼 수 있도록 하는 글꼴파일의 일종이다.
크기를 줄이고자 100kb이하로 제작되고 있으며, 제목용서체보다는 본문용서체로 주로 개발되는 것이 특징이다. 위와 같은 특징을 갖기 위해서 특정포인트에서만 사용할 수 있도록 하는 것이 일반적이다. 특정 포인트란 주로 9pt, 10pt, 12pt를 말하는 것이며, 이 이외에도 특정포인트 사용 글꼴들이 있으나, 실제로 위에서 언급한 글꼴의 크기가 대부분이다.
2. 웹폰트를 위해 제작된 트루타입폰트. 용량은 약 400kb내외이며 컴포사이트 그래피를 이용해서 제작시 약 200kb이다. 이 트루타입폰트를 모체로 하여 제작 된 것이 웹폰트이다. 하지만, 통념적으로 이 트루타입폰트를 웹폰트로 칭하기도 한다. 이 트루타입폰트 또한 특정포인트 사용 위주로 제작되었으며, 비트맵 폰트처럼 제작되었다. 즉, 폰트를 확대시켰을때, 일반적인 비트맵 이미지를 보는 것과 같다.
2. 웹폰트
기존의 폰트들은 클라이언트의 폰트시스템을 따랐습니다.
홈페이지 개발자의 컴퓨터에서 Gulim으로 작업을 하였는데 홈페이지를 보는 컴퓨터(클라이언트)에 Gulim이 없다면 다른 폰트를 사용해서 페이지를 표시하게 됩니다.
그다지 큰 문제는 없지만... Gulim의 폰트에 맞춰 표의 셀폭 등을 정해 놓았는데 Gulim보다 큰 폭을 지니는 폰트가 읽혀졌다면 표가 깨지거나 글이 보이지 않는 등의 문제가 발생했죠.
이를 예방하고 보다 웹에서 보기 좋게 사용 될 수 있는 폰트를 개발해서 제공을 시작했고 이것이 웹폰트입니다.
웹폰트 개발사에 일정액을 지불하고 폰트를 사서 자신의 웹서버에 등록하거나 개발사의 폰트서버에 접속해서 홈페이지가 로딩될 때 함께 폰트 정보도 읽어들여서 웹페이지를 표시하는 것입니다.
따라서 서버에 폰트가 지정되어 있기 때문에 클라이언트에 폰트가 존재하지 않아도 상관없이 모두가 똑같은 폰트의 홈페이지를 볼 수가 있는 것입니다.
3. 웹폰트란?????
WEFT란?
WEFT(The Web Embedding Fonts Tool)란 Microsoft사에서 개발한 프로그램으로 트루타입폰트를 웹페이지에 넣어 사용할 수 있는 일명 웹폰트 - 마소에선 embedded font - 로 전환해 주는 프로그램입니다.
WEFT 설치를 위한 컴퓨터사양
Platform : Windows 95, 98, Me, NT4.0, Windows 2000 단, XP의 경우 WEFT 3.1 beta를 설치하세요.
HDD 20MB 이상 여유공간, IE4.0 이상
WEFT 다운로드
- 먼저, WEFT3.0 또는 WEFT3.1베타판을 다운받아 설치하세요. WEFT3.0을 먼저 다운받아 설치후 WEFT3.1 베타판을 다운받아 설치하셔도 좋습니다. ^^ 둘다 같은 폴더 같은 이름으로 설치됩니다. 아래 그림을 클릭하셔 WEFT를 버전에 따라 다운받으세요. WEFT3.0은 설치프로그램으로 106KB, 3.1베타는 2MB입니다.
http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm
http://fontline.co.kr/zb45/zboard.php?id=study&no=10 이곳에 보닌까 WEFT 사용하는 방법을 동영상으로 만들어 놓았네요.
설치시 유의사항
프로그램 설치시 여러분의 컴퓨터에 관련데이터베이스가 설치되어 있지 않다면 실행중 에러메시지를 보게될 겁니다. 이런 문제를 없애기 위해 아래 그림처럼 묻는 부분에서 Database components를 체크하세요.
설치가 완성됐다면 C:\\Program Files\\OpenType Tools 폴더에 설치가 되었을 겁니다...실행시는 바탕화면에 있는 WEFT아이콘을 클릭하거나 또는 시작버튼 => 프로그램 => OpenType Tools => Microsoft weft를 클릭하셔 실행시키세요.
웹폰트 만들기
이번 강좌에선 영문 트루타입폰트(파일확장자가 .ttf 인 파일, 즉 여러분의 컴퓨터에 깔려있는 폰트)를 웹폰트로 전환하는 방법을 배우겠습니다.
다음 연습용 영문폰트를 다운받아 C:\\Windows\\Fonts폴더 내에 넣으세요. 또는 제어판 => 글꼴 에서 파일 => 새글꼴설치를 클릭하셔 설치하세요.
이제 위 두 폰트를 가지고 진행하겠습니다.
1 먼저, 아래와 같은 연습용 웹페이지(weft_test.html)를 작성하여 C:\\weft폴더에 넣습니다. weft폴더가 없죠?...그럼 새로 만드세요.
weft_test.html
<html>
<body>
WEFT TEST
Wonderful World !
</html>
2 이제 바탕화면에 있는 Microsoft WEFT 또는 시작버튼 => 프로그램 => OpenType Tools => Microsoft weft 를 클릭하여 실행합니다. 그럼 잠시후 시작시 나타났던 WEFT로고가 사라지며 아래 그림과 같은 창이 뜰겁니다. 아래창의 역할은 다음 작업을 빠르게 진행하기 위해 여러분의 C:\\Windows\\Fonts 폴더에 설치되어 있는 트루타입폰트들에 대한 정보를 미리 데이터베이스화 할지를 묻는 창입니다. \"예\"를 선택하시면 C:\\Windows\\Fonts 폴더 내에 있는 폰트들중 인식가능한 폰트들을 데이터베이스화 하기 시작합니다. 컴퓨터사양에 따라 다르긴 하겠지만 많은 시간이 소요됩니다. 마치 컴퓨터가 다운된듯한 느낌을 받게되기도 하는데 정상적으로 작업중이니 그대로 두세요. 이 과정의 작업이 끝나면 C:\\WINDOWS\\Application Data 폴더에 fontdb.mdb 데이터베이스파일로 저장이 됩니다. 만들지 않을것이므로 아니오 선택. 앞으로 다른 작업시 나타나는 데이터베이스관련 메시지창이 뜨면 무시하고 다음으로 넘어가세요.
3 다음 창은 앞으로 만들어질 웹폰트가 적용될 웹페이지의 URL를 설정하는 창입니다. 오프되어있는 Add 버튼 옆 ...버튼을 눌러 앞에서 만들어 두었던 C:\\weft\\weft_test.html 을 지정합니다. 더 부가할 페이지가 있다면 Add 버튼을 클릭하셔 작업하심됩니다. 다음 클릭!
4 다음 창에선 앞에서 지정한 페이지들에 적용된 폰트들을 웹폰트로 전환가능한지 등을 검사하는 것으로 필요없으므로 Skip analysis 체크후 다음버튼 클릭!
5 웹폰트로 만들고자 하는 트루타입폰트를 지정하고, 해당 폰트에서 적용될 문자들을 지정하는(Subset) 창으로 Add 버튼 클릭하여 May Queen 선택, 다시 Add 버튼을 클릭한후 Zinc Boomerang 선택합니다.
그럼 아래그림처럼 될 겁니다. 만약 폰트이름 옆에 붉은색이 나오면 전환할 수 없는 폰트입니다. 노랑바탕에 물음표인 경우엔 그냥 진행합니다.
6 각 폰트를 선택후 Subset 버튼을 클릭한후 사용할 폰트를 클릭하여 선택하면 선택문자가 진하게되면서 아래 Show font 옆 텍스트창에 나타나죠...이렇게 선택되어 전환된 폰트들만을 사용할 수 있습니다. 사용하고자 하는 문자만 고르므로 subset. 하지만 이미 선택되어 있다면 그냥 Ok 버튼을 클릭하세요. 다른 폰트도 같은 과정을 거쳐 Subset을 만듭니다. 위 두폰트의 경우엔 그냥 Ok버튼을 클릭하심 될겁니다. 다음버튼을 클릭하여 다음으로 넘어가죠.
7 이 과정에선 제작한 웹폰트와 적용되는 웹페이지가 위치할 폴더를 지정합니다. 웹폰트와 홈페이지를 여러분의 홈디렉토리 바로 밑에 두시면 홈페이지에서 링크된 여러분의 다른 페이지에서도 웹폰트를 적용하실 수 있습니다. 단, 무료게시판을 링크하신 경우엔 적용되지않습니다...왜?..무료게시판은 여러분의 홈주소에 있는 페이지가 아닌 타 사이트의 페이지이기 때문이죠. 우리가 작업한 폴더가 weft였습니다. 아래 그림에서 그 폴더를 지정했습니다. 이제 실제로 인터넷상에서 적용될 여러분의 웹폰트가 적용될 주소를 입력하실 차례입니다. 이는 뭔가하면 weft폴더 내에 weft_test.html이란 페이지를 만들었죠?...WEFT의 모든 작업들이 끝나면 파일확장자가 .eot인 파일이 같은 폴더내에 만들어질텐데 이 두 파일을 올릴 주소라고 생각하심 됩니다. 이 강좌에선 웹폰트강좌페이지에 적용하기 위해 www.pageshot.com/jtag/font 를 입력했습니다. 그럼 적용된 폴더 밑에 있는 페이지들에도 적용할 수 있습니다. 이제 다음 다음을 클릭하여 작업을 마칩니다. 그럼 C:\\weft 밑에 MAYQUEE0.eot 과 ZINCBOO0.eot 라는 웹폰트 2개가 드뎌 탄생하게 됩니다. 작업창 아래에 놓여 있었던 Project Log 창을 보면 생성된 웹폰트(.eot 파일)와 웹폰트 이름이 나와 있을 겁니다. 아래 그림에 보이죠?...이걸 참조하여 weft_test.html 파일을 수정해 보겠습니다.
weft_test.html
<html>
<body>
WEFT TEST
made by J\'s Tag World
</body>
</html>
8 강의 시작시 만들었던 weft_test.html 파일을 위 내용으로 바꾸어 테스트해 보세요. 위 소스를 한번 볼까요?.
웹폰트가 완성되면 적용될 웹페이지의 태그 내에 다음 내용을 삽입해야만 합니다. 반드시 넣어야만 합니다.
위의 예에서 처럼 웹폰트 두개를 사용하고자 할 땐 각각 적용하여야 합니다. 그리곤 태그나 스타일시트(CSS)를 이용하여 텍스트에 적용하면 되겠죠. 스타일시트 속성으로 @font-face { font-family : 웹폰트이름 ; src:url(웹폰트파일위치)}을 넣었으니 이제 웹폰트가 페이지전체에 적용되겠지하고 다른 작업을 하지않고 \'다 제대로 했는데 안되요 ㅠㅠ\' 하시는 분들이 계시는데 앞 속성은 지정된 웹폰트를 방문자의 컴퓨터로 임시저장하라는 명령일뿐 실제 페이지상에 이를 적용하기 위해선 위의 예에서 처럼 스타일시트나 태그를 사용하여 지정해 주어야 합니다.
참고로 http://xxxx.wo.to 등과 같이 주소를 줄여 주는 포워딩 서비스를 받고 계신 분들은 위 7번과정 중 주소를 지정하실 때 실제 주소로 지정하셔야 합니다.
5. 웹폰트의 특징과 윈도우 폰트와의 차이점
웹폰트(MWF)의 특징
- 웹폰트는 방문자가 해당 글꼴이 없어도 보여지기 때문에 홈페이지에서
이미지가 아닌 글자로서 사용할 수 있습니다.
- 일반 아웃라인처럼 작은사이즈에서 뭉게지지 않고 깨끗하게 보여집니다.
- 로딩속도와 직결된 파일사이즈 문제로, 영문, 한글2350자+빈도수가 높은 한글,
심볼문자만이 포함되어 있어, 문법에 맞지 않는 한글이나 한자는 표현이 불가능합니다.
모리스디자인 웹폰트의 특징
- 비트맵이 아닌 아웃라인 이기 때문에 페이지 프린팅이 가능하며,
지정된 사이즈가 아니더라도 화면에서 보입니다.
- Windows 2000 과 Win XP 에서는 표현되지 않는 한글과 한자도 기본글자로
대체되어 보여집니다.
- 조합한글방식과 최적 아웃라인 알고리즘 구현으로 동일한 방식의 웹폰트에 비해
현저히 작은 파일사이즈를 자랑합니다. 트루타입폰트(TTF) 와 웹폰트(MWF)의 차이점
많은 사람들이 알고 계시는 폰트는 트루타입폰트라고 부르는 폰트의 종류중 하나입니다.
트루타입폰트는 제어판의 글꼴폴더나 윈도우즈 아래에 있는 Fonts 디렉토리에 설치하여,
포토샵,워드 등의 프로그램에서 사용할 수 있습니다.
나모같은 웹에디터에서 트루타입폰트를 이용하여 작업하실 수 있지만,
이런 트루타입폰트를 이용하여 작업해 놓았다고 해서 방문자에게 해당 폰트로 보여지지는 않습니다.
방문자의 컴퓨터에 해당 폰트가 설치되어 있어야만 작업해 놓은 폰트로 볼 수 가 있으며,
만일 해당폰트가 설치되어 있지 않을 경우에는 기본폰트로 보여지게 됩니다.
예를들어, 휴먼엽서체가 마음에 들어서 열심히 홈페이지의 글자들을 휴먼엽서체로 작업해 놓아도
방문자는 굴림체로 보여지고 있을 것입니다. 이것을 확인해 보려면, 제어판의 글꼴폴더에서
휴먼엽서체를 삭제하고 본인의 홈페이지를 방문해 보기 바랍니다.
이런 문제를 극복하기 위해 제작된 것이 웹폰트이며, 웹폰트를 이용하여 홈페이지를 디자인해 놓으면,
방문자는 폰트를 가지고 있지 않아도 해당 폰트로 볼 수 가 있게 됩니다.
7. 웹폰트 홈페이지에 적용하기
직접 만든 웹폰트를 홈페이지에 적용하는 방법을 알아보겠습니다.
우선 웹폰트가 자신의 계정에 업로드가 되어 있어야 합니다.
이미지 파일처럼 웹폰트에도 URL이 있어야 홈페이지에 적용시킬 수 있습니다.
직접 만든 웹폰트 파일을 자신의 계정에 업로드 합니다.
네이버홈을 예로 들겠습니다.
http://myhome.naver.com/네이버 라는 홈페이지를 사용하고 있으며,
해당 계정에 네이버체.eot 라는 웹폰트를 업로드했다면
웹폰트의 URL은 http://myhome.naver.com/네이버/네이버체.eot 가 됩니다.
이제 홈페이지에 적용시키기 위한 소스를 보겠습니다.
| <style type="text/css"> <!-- @font-face {font-family: 네이버체 ; src:url(http://myhome.naver.com/네이버/네이버체.eot );} a:link {font-family: 네이버체 ;font-size: 10pt ;} a:visited {font-family: 네이버체 ;font-size: 10pt ;} a:hover {font-family: 네이버체 ;font-size: 10pt ;} a:acvite {font-family: 네이버체 ;font-size: 10pt ;} body,div,table,tr,td,p,span {font-family: 네이버체 ;font-size: 10pt ;} --> </style> |
보라색은 앞서 말씀드린 웹폰트의 URL 입니다.
네이버체는 해당 폰트의 서체명이고, 10pt는 해당 폰트의 사이즈입니다.
예를 들기 위해 임의로 사용한 서체명과 사이즈입니다.
직접 홈페이지에 적용하실 때는 사용하고자 하는 폰트의 서체명, 사이즈를 입력해주세요.
위 박스 안의 소스를 웹폰트를 적용시킬 홈페이지의 <head></head> 사이에 넣어주세요.
제로보드 웹폰트 홈페이지에 적용홈페이지 파일 소스속에 스타일 부분에 웹폰트 요구 요구할 경우
웹폰트를 지정 하지 않으면 홈페이지 로딩이 느려집니다.
메모장으로 편집하세요~
메모장으로 파일형식 *.* 하시고 파일을 불러와서 편집하세요~
나모나 기타웹에디터로 편집하시면 소스가 망가질수 있습니다.
style.css 파일또는 게시판스킨 이나 최근게시글 외부로구인 기타 파일소스속에
@font-face { font-family:폰트명; src:url(http://웹폰트주소);}
위소스에 http://웹폰트주소 를 적어주세요~
웹폰트 주소를 적지 않으면 홈페이지 가 느려집니다.
웹폰트가 없으시면
@font-face { font-family:폰트명; src:url(http://) ;}
로 하시거나 이 한줄을 지워주세요~
메모장으로 편집하세요~
메모장으로 파일형식 *.* 하시고 파일을 불러와서 편집하세요~
나모나 기타웹에디터로 편집하시면 소스가 망가질수 있습니다.
파일에적용하는 스타일 기본 소스 입니다.
|
<★style type=text/css> @font-face {★ font-family:폰트명; src:url(http://웹폰트주소);} ★body,td,select,input,div,form,textarea,center,option,pre,blockquote {font-size:9pt;font-family:폰트명;color:#444444;} a:link {★color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:visited {★color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:active {★color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:hover {★color:888888;font-family:폰트명;font-size:9pt;text-decoration:none} </style> |
인덱스나 홈페이지 파일 소스속 밑에 직접 넣으시면 됩니다.
가 없는 경우는 맨위에 넣으시면됩니다.
웹폰트가 없으시면
@font-face { font-family:폰트명; src:url(http://) ;}로 하시거나 이 한줄을 지워 주세요~
다른방법 으로는 style.css 이용하셔도 됩니다.
아래 소스를 style.css 파일로만드세요~
|
@font-face { font-family:폰트명; src:url(http://웹폰트주소);} body,td,select,input,div,form,textarea,center,option,pre,blockquote {font-size:9pt;font-family:폰트명;color:#444444;} a:link {color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:visited {color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:active {color:444444;font-family:폰트명;font-size:9pt;text-decoration:none} a:hover {color:888888;font-family:폰트명;font-size:9pt;text-decoration:none} |
홈페이지 파일 소스속 <head> 밑에
<link rel=StyleSheet HREF=style.css type=text/css title=style>
를 넣으시면 됩니다
p.s
link 링크
visited 열려던 링크
active 열고 있는 링크
hover 마우스 오릴 때 링크입니다.
'WebPrograming관련' 카테고리의 다른 글
| Ajax 마스터하기, Part 1: Ajax 소개 (한글) (0) | 2007.05.25 |
|---|---|
| 웹폰트 사용방법 (0) | 2007.05.05 |
| 웹폰트 만들기 (0) | 2007.05.05 |
