웹폰트 기초 사용법

WebPrograming관련 : 2007. 3. 16. 19:08

-------------------------------------------------------
<STYLE TYPE="text/css">
@font-face {
FONT-FAMILY: 엔터솔잎9;
src:url(http://myhome.naver.com/yk4476/enter_solip9.ewf);
}
</STYLE>
-------------------------------------------------------
위와 같이 style태그를 넣는데, 보통 위치는 <head>태그 사이에 넣습니다.

font-family: 폰트이름; src:url(웹폰트 주소); 인 거지요~

src:url(http://myhome.naver.com/yk4476/enter_solip9.ewf);

로 완전히 http://가 포함된 전체주소를 넣어도 되고, html 이 있는 곳에 웹폰트도 같이 있다면,

src:url(enter_solip9.ewf);

로 써도 무방 합니다.

웹폰트이름은 원작 이름을 존중해 주는것이 예의 입니다.

실제 사용법은 원하는 태그 안에
-------------------------------------------------------
style='font-family:엔터솔잎9; font-size:9pt;'
-------------------------------------------------------

요런식으로 씁니다.

예를 들면
-------------------------------------------------------
<A HREF="" style='font-family:엔터솔잎9; font-size:9pt;'></A>
-------------------------------------------------------

이런식도 가능합니다.
-------------------------------------------------------
<FONT style="font-size:9pt;" face='엔터솔잎9'></FONT>
-------------------------------------------------------

사이즈는 웹폰트마다 잘보이는 사이즈가 있으므로 반드시 지정하는 것이 좋습니다.

만약 모든 홈페이지에 적용을 원하면 위의 style태그를 아래와 같이 바꾸면 됩니다.
-------------------------------------------------------
<STYLE TYPE="text/css">
@font-face { FONT-FAMILY: 엔터솔잎9; src:url(./enter_solip9.ewf);}

body,table,a,input,form,td {font-family:엔터솔잎9; font-size:9pt;}
</STYLE>
-------------------------------------------------------

추가로, 웹폰트는 @font-face를 여러개 사용하여 여러개 적용 할 수 있습니다.
예를 들면
-------------------------------------------------------
<STYLE TYPE="text/css">
@font-face { FONT-FAMILY: 엔터솔잎9; src:url(./enter_solip9.ewf);}
@font-face { FONT-FAMILY: 꼬꼬체; src:url(./kokoche.eot);}
</STYLE>
-------------------------------------------------------

하지만, 너무 많은 웹폰트를 쓰면 홈페이지가 느려지므로 적절하게 사용하셔야 합니다.

-----------------------------------------------------------------------------------

1) 웹폰트를 자신의 홈계정에 올린다.
ftp로 올릴 경우 반드시 바이너리(binary)로 올려야 됩니다. 그림파일처럼.

2) html화일에 style을 지정한다. @font-face{...} 이부분..

3) 웹폰트 적용하고 싶은 글자의 태그안에 style='font-family:...; font-size:9pt;' 를 추가 한다.
예를 들어 웹페이지 전체에 적용 하고 싶다면 <body style='font-family:...; font-size:9pt;'>

body 태그에 넣는것만으론 완벽하지 않기 때문에 스타일 태그안에
body,table,a,input,form,td {font-family:..; font-size:9pt;}
요걸 추가하면 거의 90% 이상 웹폰트가 적용되 진다.

'WebPrograming관련' 카테고리의 다른 글

css 적용하기 (0)	2007.03.18
UTF-8 (UCS Transformation Format) (0)	2007.03.16
uft-8로 오라클에 한글저장시 몇 바이트로 저장될까요 ? (0)	2007.03.16