달력

05

« 2012/05 »

  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  

*웹폰트의 정의


1. 웹폰트란, 웹페이지에 글꼴이 설치되어 있지 않아도 특정 글꼴로 볼 수 있도록 하는 글꼴파일의 일종이다.
크기를 줄이고자 100kb이하로 제작되고 있으며, 제목용서체보다는 본문용서체로 주로 개발되는 것이 특징이다. 위와 같은 특징을 갖기 위해서 특정포인트에서만 사용할 수 있도록 하는 것이 일반적이다. 특정 포인트란 주로 9pt, 10pt, 12pt를 말하는 것이며, 이 이외에도 특정포인트 사용 글꼴들이 있으나, 실제로 위에서 언급한 글꼴의 크기가 대부분이다.

2. 웹폰트를 위해 제작된 트루타입폰트. 용량은 약 400kb내외이며 컴포사이트 그래피를 이용해서 제작시 약 200kb이다. 이 트루타입폰트를 모체로 하여 제작 된 것이 웹폰트이다. 하지만, 통념적으로 이 트루타입폰트를 웹폰트로 칭하기도 한다. 이 트루타입폰트 또한 특정포인트 사용 위주로 제작되었으며, 비트맵 폰트처럼 제작되었다. 즉, 폰트를 확대시켰을때, 일반적인 비트맵 이미지를 보는 것과 같다.


 

 웹폰트(MWF)의 특징 

 

- 웹폰트는 방문자가 해당 글꼴이 없어도 보여지기 때문에 홈페이지에서

 이미지가 아닌 글자로서 사용할 수 있습니다.
- 일반 아웃라인처럼 작은사이즈에서 뭉게지지 않고 깨끗하게 보여집니다.
- 로딩속도와 직결된 파일사이즈 문제로, 영문, 한글2350자+빈도수가 높은 한글,

 심볼문자만이 포함되어 있어, 문법에 맞지 않는 한글이나 한자는 표현이 불가능합니다.


 

 모리스디자인 웹폰트의 특징

 

- 비트맵이 아닌 아웃라인 이기 때문에 페이지 프린팅이 가능하며,

 지정된 사이즈가 아니더라도 화면에서 보입니다.
- Windows 2000 과 Win XP 에서는 표현되지 않는 한글과 한자도 기본글자로

 대체되어 보여집니다.
- 조합한글방식과 최적 아웃라인 알고리즘 구현으로 동일한 방식의 웹폰트에 비해

 현저히 작은 파일사이즈를 자랑합니다.



 트루타입폰트(TTF) 와 웹폰트(MWF)의 차이점

많은 사람들이 알고 계시는 폰트는 트루타입폰트라고 부르는 폰트의 종류중 하나입니다.

트루타입폰트는 제어판의 글꼴폴더나 윈도우즈 아래에 있는 Fonts 디렉토리에 설치하여,

포토샵,워드 등의 프로그램에서 사용할 수 있습니다.

나모같은 웹에디터에서 트루타입폰트를 이용하여 작업하실 수 있지만,

이런 트루타입폰트를 이용하여 작업해 놓았다고 해서 방문자에게 해당 폰트로 보여지지는

않습니다.

방문자의 컴퓨터에 해당 폰트가 설치되어 있어야만 작업해 놓은 폰트로 볼 수 가 있으며,

만일 해당폰트가 설치되어 있지 않을 경우에는 기본폰트로 보여지게 됩니다.

예를들어, 휴먼엽서체가 마음에 들어서 열심히 홈페이지의 글자들을 휴먼엽서체로 작업해

놓아도 방문자는 굴림체로 보여지고 있을 것입니다. 이것을 확인해 보려면, 제어판의

글꼴폴더에서 휴먼엽서체를 삭제하고 본인의 홈페이지를 방문해 보기 바랍니다.
이런 문제를 극복하기 위해 제작된 것이 웹폰트이며, 웹폰트를 이용하여 홈페이지를

디자인해 놓으면, 방문자는 폰트를 가지고 있지 않아도 해당 폰트로 볼 수 가 있게 됩니다.

 



*트루타입폰트를 웹폰트로 만들어 보자

 

 

트루타입폰트란...

 

트루타입(True Type) 폰트란 윈도에서 사용하는 화면에 문자를 표시하거나 인쇄할 수 있는 아웃라인 폰트(글꼴)를 말한다. 윈도 상에서 어떤 애플리케이션 소프트웨어에서도 공유해 사용할 수 있고 인쇄 폰트와 화면 디스 ........(생략) [ 출처 : 네이버 백과사전 ]

 

한마디로 윈도우에서 여러분들이 사용하고 계시는 폰트입니다. 하하^^

 

 

 



준비 할 것들


1. 웹폰트로 만들글꼴 (*.TTF , *.TTC , *.FON ... 등등)


2. 웹폰트 변환 프로그램 (WEFT3 FULL)

- 마크로소프트 서버에서 다운 로드 :
다운 받기


3. index.html파일

(내문서 폴더나 바탕화면이든...마우스 오른쪽 눌러서 새로만들기에 텍스트 문서를 클릭.
새로 만들어진 txt 문서의 파일명을 index.html로 변경.


* 이름이 영문으로 된 폴더를 하나 만들어서 위의 파일 네개를 한곳에 저장.

* weft3.exe 를 설치.

* 웹폰트로 변환하기


※ 변환하기전 주의사항

weft3.exe 이 프로그램을 설치하면서 글꼴폴더안에 글꼴들의 디비를 만들게 된다.
설치과정에서 재대로 디비를 만들지못했다면 툴" 메뉴에 있는 "update font DB" 를 클릭해서
글꼴폴더 안의 정보를 다시 갱신 해주어야 한다. 갱신을 하지 않으면 웹폰트변환할때 불러올 글들이 보이지 않게되는 현상이 발생한다.




본격적으로...


 

1. 프로그램의 설치




다운로드 받은 WEFT3을 설치한다.





일반 프로그램처럼 설치를 마친 후 실행을 하면 폰트데이터를 읽는다.
여기에서 시간이 좀 소요될 수 있다. 폰트 폴더에 설치된 폴더의 수가 많을수록 오래걸리므로 윈도우 기본폰트를 제외한 폰트들을 잠시 옮겨두었다가 웹폰트를 만든 후에
다시 복구해서 사용하는 것도 좋다.


 


2. 웹폰트 만들기

Weft는 잠시 그대로 두고 임의의 폴더를 만든 후 빈 html 파일을 새로 만든다.


내용은 없어도 되며 html파일로 저장. (예: index.html)

※ 단, 임의로 만든폴더의 경로에 한글명이 없어야 함.

  (바탕화면 등의 한글폴더에 생성금지)

 

 

Weft 프로그램으로 돌아와서 이름과 이메일은 적당히 적고 다음으로 넘어간다.

 

 

 




①의 ... 버튼을 누르고 좀전에 새로 만든 html파일(index.html)을 찾아서 연다.
그리고 다음으로 넘어 간다.

 

 

 

 

Skip analysis 에 체크를 하고 다음으로 넘어 간다.

 

 

 


아래의 ①Add... 를 누르고 웹폰트로 만들려는 폰트를 선택.


같은 화면에서 ②Subset... 을 누르고 새로뜬 Subset Editor에서 ③Load.. 를 누른 후

파일타입을 All files 로 바꾸고 받아두었던 소야웹폰트.txt 를 선택.

OK를 누르고 다음으로 넘어간다.





dit... 를 누르고 웹폰트를 사용하고자 하는 도메인을 추가한 후 다음을 누르면

새로 만들었던 html파일이 있는 폴더에 웹폰트 파일이 만들어져 있다.

만들어진 웹폰트파일의 이름을 폰트이름에 맞게 수정해서 사용면 된다.

 (예: 플라보레드-> flavored.eot)




*웹폰트 홈페이지에 적용하기

 

직접 만든 웹폰트를 홈페이지에 적용하는 방법을 알아보겠습니다.

 

우선 웹폰트가 자신의 계정에 업로드가 되어 있어야 합니다.

 

이미지 파일처럼 웹폰트에도 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>
<!--
@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 ;}
-->


보라색은 앞서 말씀드린 웹폰트의 URL 입니다.

 

네이버체는 해당 폰트의 서체명이고, 10pt는 해당 폰트의 사이즈입니다.

 

예를 들기 위해 임의로 사용한 서체명과 사이즈입니다.

직접 홈페이지에 적용하실 때는 사용하고자 하는 폰트의 서체명, 사이즈를 입력해주세요.

 

 

위 박스 안의 소스를 웹폰트를 적용시킬 홈페이지의 <head></head> 사이에 넣어주세요.

TAG
Posted by 根™