|
 |
|
|
홈 > 게시판 > 공지사항 |
 |
|  두개이상의 웹폰트를 한페이지에 사용하기 | |
| |
 님이 2003년 02월 27일 12:15:48 에 작성한 글입니다. (read:6114, vote:1145) 추천하기 |
|
|
◆ 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) |
|
|
|
 |
|
|
라이센스 확인
