글자의 스타일을 지정할때 사용하는 Font 속성입니다.

 

<div style="font-family:verdana;font-size:9pt;color:#FF0000;font-style:inherit;font-weight:bold;letter-spacing:-2px;word-spacing:3px;line-height:200%">
글자의 스타일을<br>
지정할때 사용하는 Font 속성입니다.
</div>

결과

글자의 스타일을
지정할때 사용하는 Font 속성입니다.

 

1. font-family

글꼴을 설정합니다.

 

2. font-size

글꼴의 크기를 설정합니다.

 

* 절대(고정) 크기의 단위

표기

단위

표기

단위

 in

 인치 (1인치 = 2.54cm ) 

 xx-large    

 medium보다 4.5배 확대          

 cm

 센티미터

 x-large

 medium보다 3배 확대

 mm

 밀리미터

 large

 medium보다 1.5배 확대

 pt

 포인트 ( 1포인트 = 1/72인치 ) 

 small

 medium보다 1.5배 축소

 pc

 파이카 ( 1파이카 = 12포인트 )            

 x-small

 medium보다 3배 축소

 medium 

 12pt 크기

 xx-small 

 medium보다 3.5배 축소

 

* 상태(비례) 크기의 단위

표기

단위

 em

 기준 글꼴 문자의 높이

 ex

 기준 글꼴 문자의 영문 소문자 높이

 %

 기준 글꼴 크기에 대한 백분률 크기

 px

 1픽셀을 1로 하는 단위

 larger

 글자 크기를 앞에 입력한 글자보다 크게 

 smaller  

 글자 크기를 앞에 입력한 글자보다 작게  

 

3. font-style

글자의 기울기를 설정합니다.

 

normal - 정상

oblique - 글꼴이 기운 형태

italic - 글꼴이 이탤릭 형태, 이탤릭 글꼴이 없으면 oblique로 표시

inherit - 부모 요소의 값을 상속

 

4. font-weight

글자의 두께를 설정합니다.

 

normal - 정상

bolder - 조금 더 굵게

bold - 굵게, <b> 태그 효과와 동일

lighter - 가늘게

100 (가장 가늘게) ~ 400 (normal) ~ 900 (가장 굵게) 숫자를 이용해 지정할 수도 있습니다.

 

5. letter-spacing

글자 사이의 간격을 설정합니다. 기본은 0이며 숫자가 커질수록 간격이 넓어지고 작아질수록(음수) 좁아집니다.

 

6. word-spacing

단어 사이의 간격을 설정합니다. 기본은 0이며 숫자가 커질수록 간격이 넓어지고 작아질수록(음수) 좁아집니다.

 

7. line-height

줄 간격을 설정합니다. 퍼센트(%) 또는 픽셀(px), 포인트(pt) 등 절대/상태 크기의 단위로 지정 가능합니다.