개체 속의 텍스트에 사용되는 글꼴의 크기를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체 속의 텍스트에 사용되는 글꼴의 크기를 나타내는 문자열이다.

절대 크기 xx-small, x-small, small,, medium, large, x-large, xx-large.등 사전에 정의된 크기를 나타내는 키워드를 사용한다.
상대크기 모체 개체에 상대적인 글지 크기를 나타내는 방식으로 larger, smaller을 사용할 수 있다.
(길이) 부동소수점수치 다음에 cm, mm, in, pt, pc나 px 등 길이 단위가 따르는 절대 길이, 혹은 em 혹은 ex 등의 단위가 따르는 상대 길이이다. CSS 길이단위를 참조하라.
(백분율) 정수값에 백분율 기호(%)를 붙인 것이다. 이 값은 모체 개체의 글자 크기에 상대적인 크기이다. IE3.0에서는 이 값을 디폴트 글자 크기에 상대적으로 계산하였다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 medium이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속된다.

특기

IE6에서 !DOCTYPE 속성에 규격에 부합하는 설정을 하면, 이 복합 축약 속성의 디폴트 font-size 값이 medium이 아니라 small이다.

음수값은 허용되지 않는다. em은 모체 개체의 글자 크기에 상대적인 크기이며, 2em이면 200%와 같다.

IE4.0 이후 버전에서는 엘레멘트의 폰트 높이나 글자 x의 높이를 사용하여 상대적으로 지정하는 가능한 길이 값을 지원한다.

적용
개체scriptCSS IE 버전
참조
font CSS 길이단위

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


testP0: 지정하지 않은 문단

testP1: font-size: 75%인 문단

testP2: font-size: .6em인 문단

testP3: font-size:large인 문단

testP4: font-size:larger인 문단

testP5: font-size:x-large인 문단

<P id=testP0>testP0: 지정하지 않은 문단</P>
<P style="font-size: 75%" id=testP1>testP1: font-size: 75%인 문단</P>
<P style="font-size: .6em" id=testP2>testP2: font-size: .6em인 문단</P>
<P style="font-size: large" id=testP3>testP3: font-size:large인 문단</P>
<P style="font-size: larger" id=testP4>testP4: font-size:larger인 문단</P>
<P style="font-size: x-large" id=testP5>testP5: font-size:x-large인 문단</P>
<P style="border:solid 1 blue;color:teal;width:400">
<SCRIPT>
str='testP0.style.fontSize='+testP0.currentStyle.fontSize+'<BR>';
str+='testP1.style.fontSize='+testP1.style.fontSize+'<BR>';
str+='testP2.style.fontSize='+testP2.style.fontSize+'<BR>';
str+='testP3.style.fontSize='+testP3.style.fontSize+'<BR>';
str+='testP4.style.fontSize='+testP4.style.fontSize+'<BR>';
str+='testP5.style.fontSize='+testP5.style.fontSize+'<BR>';
document.write(str);
</SCRIPT>
</P>

마우스를 올려보라.

스크립트 이벤트처리자로 onmouseover 이벤트에서 글자 크기를 두배로 하고 onmouseout 이벤트에서 원상복귀한다.

<DIV onmouseover="this.style.fontSize='2em';" onmouseout="this.style.fontSize='';">마우스를 올려보라.</DIV>