티스토리 뷰

▣ 컴퓨터정보

웹폰트 기초 사용법 vol.1

사랑과사람 2008. 6. 30. 04: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>
-------------------------------------------------------

하지만, 너무 많은 웹폰트를 쓰면 홈페이지가 느려지므로 적절하게 사용하셔야 합니다.
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
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
글 보관함