Trio 홈페이지 CSS 매뉴얼 폰트 특성 예제 메뉴로
CSS2 규격 폰트 참조 HTML 규격 정렬, 폰트 스타일 참조
폰트 글꼴
font-family
⇒ ⇒ ⇒

CSS1 규격
폰트 글꼴 설명

사용 할 글꼴(font 종류)를 지정 한다. 콤마(,)로 예비 글꼴을 지정 할 수 있고, 앞에서부터 우선 적용된다. 사용자가 확실히 갖고 있을 글꼴을 사용하는 것이 좋다.
일반적인 글꼴들은:

굴림, 굴림체, 궁서, 궁서체, 돋움, 돋움체, 바탕, 바탕체, Arial, Arial Black, Arial Narrow, Bookman Old Style, Comic Sans MS, Courier New, Garamon, Geogia, Impact, MingLiU, Minon Web, Morden, Monotype.com, MS Gothic, MS Hei, MS Song, Time New Roman, Trebuchet MS, Verdana

font-family 목록

.font1 {font-family: Helvetica,sans-serif;}

예제
<STYLE type="text/css"> .font1 {font-family: 궁서체,'Comic Sans MS';} </STYLE> <table border=1 width=80%><tr> <td>Font 미 지정</td> <td><span class=font1>궁서체,'Comic Sans MS' Font 지정</span> </td></tr></table>

결과

Font 미 지정 궁서체,'Comic Sans MS' Font 지정

폰트 스타일
font-style
italics, oblique, normal

CSS1 규격
폰트 스타일 설명
font-style이 italics, oblique 나 normal 임을 지정한다.
EM {font-style: oblique;}
.font2 {font-style: oblique;}

예제

<STYLE type="text/css">
 .font2 {font-style: normal;}
 .font3 {font-style: oblique;} 
</STYLE>

<table><tr>
 <td class=font2>Font normal 지정</td>
 <td class=font3>Font italic 지정</td>
</tr></table>

결과
Font normal 지정 Font italic 지정

폰트 변이
font-variant
small-caps, normal

CSS1 규격
폰트 변이 설명
font를 작은 대문자(small-caps) 이나 normal로 지정 한다.
H3 {font-variant: small-caps;}
.font5 {font-variant: small-caps;}

예제

<STYLE type="text/css">
 .font4 {font-variant: normal;}
 .font5 {font-variant: small-caps;} 
</STYLE>

<table><tr>
 <td class=font4>Font normal 지정</td>
 <td class=font5>Font small-caps 지정</td>
</tr></table>

결과
Font normal 지정 Font small-caps 지정

폰트 굵기
font-weight
normal, bold, bolder, lighter, 길이

CSS1 규격
폰트 굵기 설명
font를 두껍게 혹은 얇게 수치로 지정 한다.
B {font-weight: 700;}
.font6 {font-weight: 700;}

예제

<STYLE type="text/css">
 .font6 {font-weight: 700;}
</STYLE>

<table><tr>
 <td>Font 보통(미 지정)</td>
 <td class=font6>font-weight 700 지정</td>
</tr></table>

결과
Font 보통(미 지정) font-weight 700 지정

폰트 크기
font-size
⇒ ⇒ ⇒

CSS1 규격
폰트 크기 설명
font 크기를
절대 크기(absolute size)
   xx-small, x-small, small, medium, large, x-large, xx-large,
   size(length: px)
혹은
상대 크기(relative size)
   larger, smaller, 백분율 크기(percentage: %)로 지정 한다.
H2 {font-size: 200%;}
.font7 {font-size: 36pt;}

예제

<STYLE type="text/css">
 .font7 {font-size: 14pt;}
 .font8 {font-size: 80%;}
</STYLE>

<table><tr>
 <td class=font7>font-size 14pt 지정</td>
 <td class=font8>font-size 80% 지정</td>
</tr></table>

결과
font-size 14pt 지정 font-size 80% 지정

폰트 복합 명령
font
⇒ ⇒ ⇒

CSS1 규격
폰트 복합명령 설명
간략하게 폰트의 여러 특성을  한번에 지정 할 수 있는데
지정하는 순서는 바뀌면 않고  순서는
   font{font-style font-variant font-weight
      font-size/line-height font-family ;}
 이며 빈칸으로 구분 되고  값은 생략 될 수 있다.
P {font: italic nomal bold 12pt/14pt 궁서,'Courier New';}
.font9 {font: bold 12pt/14pt Helvetica,sans-serif;}

예제

<STYLE type="text/css">
 .font9 {font: normal 10pt/12pt 궁서체}
 .font10 {font: bold 11pt/13pt Helvetica,sans-serif;}
</STYLE>

<table>
<tr><td class=font9>bold 10pt/12pt 궁서체 지정</td></tr>
<tr><td class=font10>
   italic normal 10pt/13pt Bookman Old Style 지정</td></tr>
</table>

결과
bold 10pt/12pt 궁서체 지정
italic normal 10pt/13pt Bookman Old Style 지정

소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
번역문 소유자 - Trio 홈페이지 제공
이 문서(http://trio.co.kr/webrefer/css/cssfont.html)는
자유로이 연결 사용이 가능함.
번역문 소유자 - Trio 홈페이지 이전 페이지 페이지 맨위 다음 페이지(이전 페이지로 이동 했을 때 만)