(주)모리스디자인
 
라이센스 확인 장바구니 사이트맵

홈 > 게시판 > 공지사항
구매관련(19)  설치관련(4)  변경관련(5)  사용법(14)  게시판(14)  카페/클럽(0)  이상증상(3)  기타(4)  
   두개이상의 웹폰트를 한페이지에 사용하기
  님이 2003년 02월 27일 12:15:48 에 작성한 글입니다. (read:6037, vote:1107) 추천하기
◆ 2개 이상의 웹폰트를 사용할때 참고할 사항
웹폰트는 방문자의 컴퓨터에 임시적으로 설치되는 폰트라는 것만 다르고, HTML 적용문법은 일반폰트와 똑같습니다.
인터넷의 기본서체는 대부분이 굴림체이기 때문에 폰트지정을 하지 않으면 방문자는 굴림체로 보여질 것입니다.
윈도우에 기본으로 설치된 한글서체에는 굴림,돋움,바탕,궁서체가 있습니다.
따라서 위 4개의 서체는 모든 방문자가 가지고 있다고 보시면 될 것입니다.
이와 같은 개념으로 웹폰트도 @font-face로 등록만 시켜주면 모든 방문자의 컴퓨터에 설치되어 있는 폰트로 생각하면 됩니다.
2개 이상의 웹폰트를 사용할때 주의할 점은 웹정 9포인트와 10포인트를 같은 폰트로 보아서는 안됩니다.
임시적으로 설치되는 글꼴이지만, 두개는 서로 다른 서체이기 때문에 같은이름으로 지정하면 적용이 안됩니다.
예제로 설명하자면,
@font-face {font-family:웹정; src:url(http://www.fontpia.co.kr/fonts/bitmap/jung9.mwf);}
@font-face {font-family:웹정; src:url(http://www.fontpia.co.kr/fonts/bitmap/jung10.mwf);}
위와 같이 jung9.mwf와 jung10.mwf를 모두 '웹정'으로 등록시켜버리면 안됩니다.
반드시 아래예제와 같이 폰트이름을 구분해 줘야 합니다.



<html>
<style type="text/css">
<!--
@font-face {font-family:웹정9; src:url(http://www.fontpia.co.kr/fonts/bitmap/jung9.mwf);}
@font-face {font-family:웹정10; src:url(http://www.fontpia.co.kr/fonts/bitmap/jung10.mwf);}
@font-face {font-family:딱지; src:url(http://www.fontpia.co.kr/fonts/bitmap/dungddak12.mwf);}
body {font-family:웹정9;font-size:9pt;line-height:160%;}
td {font-family:웹정10;font-size:10pt;line-height:160%;}
a {font-family:딱지;color:darkbluefont-size:12pt;text-decoration:none;}
a:hover {font-family:딱지;color:red;font-size:12pt;text-decoration:none;}
-->
</style>
<center>
<br><br>
웹폰트 테스트 페이지(웹정체 9포인트로 보여집니다.)
<br><br>
<table cellpadding=3 cellspacing=1 bgcolor=#C7CBEF>
<tr>
<td width=400 bgcolor=#E7EBFF align=center valign=middle>
저의 홈페이지에 방문해주셔서 감사합니다.(웹정체 10포인트)
</td></tr>
<tr>
<td bgcolor=#F2F8F8 width=400>
지금은 홈페이지 리녈중입니다.<br>
빠른 시일내에 완성시키겠습니다.(웹정체 10포인트)
</td>
</tr>
</table>
<br><br>
<a href="http://www.fontpia.co.kr">폰트피아 홈페이지(딱지체 12포인트)</a>
<br><br>
<font style="font-family:웹정10;font-size:9pt;color:#888888;">
만든날 : 2001년
</font>
</center>
</html>


@font-face를 이용하여 임시적으로 폰트를 등록할 때 font-family:에 등록할 폰트이름을 지정하는 것입니다.
이때 지정하는 폰트이름은 본인의 자유입니다. 물론, 소스에서 해당 폰트를 사용할때는 임의로 지정한 폰트이름을
지정해 줘야 할 것입니다.
예제에서 해당 문장이 어떤 폰트로 보여지는지 적어놓았습니다.
위 예제를 테스트 해보면, 제일아래 부분의 "만든날 : 2001년"의 문장이 이상하게 나올것입니다.
그 이유는 아래와 같습니다.
@font-face {font-family:웹정10; src:url(http://www.fontpia.co.kr/fonts/bitmap/jung10.mwf);}
위 문장으로 인해 jung10.mwf(웹정체10포인트로 제작된 파일)을 '웹정10'이라는  폰트이름으로 등록해 놓고,
사용할때는 <font style="font-family:웹정10;font-size:9pt;color:#888888;">
위와 같이 font-family:웹정10; 을 font-size:9pt;로 사용했기 때문입니다.
즉, 10포인트만 들어있는 웹정체를 9포인트로 사용하려 했기 때문에 그런 결과가 나타나는 것입니다.

나머지 예제들에 대한 이해는 이전 강좌를 참조해 주시기 바랍니다.


Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)   
No 분류 제목 이름 등록일 조회수
- 갑자기 웹폰트로 보여지지 않고 기본서체로 보여집니다.   03/02/27 2735
- 글꼴폴더에는 설치가 되어 있는데, 포토샵,나모,워드에서는 보이지 않...   03/02/27 9211
- 웹폰트를 사용한 후 페이지가 한번에 로딩되지 않습니다.   03/02/27 5759
- 웹폰트 다운로드에서 사용까지..   03/02/27 11153
- 폰트 구매 라이센스 안내 운영자  22617
- 저작권법에 걸려서 법원에서 연락이 왔습니다, 어떻게 해야합니까? 운영자  23475
71 사용법 포토샵에서 글자가 갑자기 크게 나와요.   04/01/06 9477
68 사용법 [별자리와 12지신], [군것질]은 어떻게 사용합니까?   04/01/06 8765
62 사용법 포토샵에서 글꼴 목록이 영문으로 나올때는..   04/01/06 4480
61 사용법 Windows Server 2003 사용자분들 참고하십시요.   03/12/08 4391
39 사용법 프레임마다 스타일을 지정해줘야 하나요?   03/02/27 5071
38 사용법 두개이상의 웹폰트를 한페이지에 사용하기   03/02/27 6037
37 사용법 스타일시트(CSS)로 지정할 수 있는 폰트속성   03/02/27 6450
36 사용법 스타일시트(CSS)의 적용예제   03/02/27 7604
35 사용법 스타일시트(CSS)에 대한 도움말   03/02/27 5968
34 사용법 나모등의 웹에디터를 이용하여 사용하기   03/02/27 6779
  [1][2]
copyright 2002-2003 Ultraboard