Font 속성

▲ ▶

글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다.

기호 설명 

A | B: A 또는 B 중의 하나이다.
A || B: A 또는 B 중의 하나, 또는 둘 다이다.
[  ]: 일반적인 괄호의 의미이다.
A{1,2}: A가 최소한 1번에서 최대한 2번까지 들어갈 수 있다.
<A>: A의 값을 쓴다.
A*: A가 0번 이상 여러번 나올 수 있다.
A?: A가 들어갈 수도 있고, 안 들어갈 수도 있다.

font-family: [[ <글꼴이름> | <기본글꼴이름> ],]* [<글꼴이름> | <기본글꼴이름>]

모든 element에 적용할 수 있고, 유전된다.

초기값은 브라우저마다 다르다.

두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰 따옴표(" ")로 묶는다.

브라우저는 앞에 있는 글꼴부터 보여주려고 노력한다.

제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 준다.

영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다. 

<HTML>
<HEAD>
<STYLE type="text/css">
H1 { font-family: Flubber, "Times New Roman", serif }
</STYLE>
<BODY>
<H1>Flubber라는 글꼴이 없으면 Times New Roman으로 나온다.</H1>
<BODY>
</HTML>

※ 한글 글꼴은 아직 지원되지 않는다.

font-style: normal | italic | oblique

글자의 모양이다.

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다.

Italic과 oblique은 모두 기울임꼴이다. 

<HTML>
<HEAD>
<STYLE type="text/css">
P {font-style: italic}
</STYLE>
<BODY>
여기는 보통 글자입니다.<BR>
<P>여기는 기울임꼴이구요.</P>
여기는 또 보통입니다.
<BODY>
</HTML>

font-variant: normal | small-caps

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다.

Small-caps는 크기가 작은 대문자로 나온다. 

<HTML>
<HEAD>
<STYLE type="text/css">
P {font-variant: small-caps}
</STYLE>
<BODY>
I can't help falling in <P>love</P> with you.
<BODY>
</HTML>

※ 원래 small-caps는 정상적인 대문자보다 조금 작게 나와야 하는데, 예를 보면 알 수 있듯이 거의 비슷하다.

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

글자의 굵기를 조정한다.

모든 element에 적용할 수 있고, 유전된다.

초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다. 

<HTML>
<HEAD>
<STYLE type="text/css">
P {font-weight: 800}
</STYLE>
<BODY>
I can't help falling in <P>love</P> with you.
<BODY>
</HTML>

※ 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다.

어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다.

font-size: <절대값> | <상대값> | <길이> | <퍼센트>

글자의 크기를 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 medium이다.

퍼센트 값을 썼을 때는 부모 element의 글자 크기를 기준으로 한다. 

<HTML>
<HEAD>
<STYLE type="text/css">

BODY { font-size: 10pt}
BLOCKQUOTE { font-size: xx-large }
</STYLE>
<BODY>
여기는 10포인트 글자이다.
<BLOCKQUOTE>
여기는 xx-large만큼 커진다.
</BLOCKQUOTE>
<BODY>
</HTML>

font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?<'font-family'> ]

모든 element에 적용할 수 있고, 유전된다.

대표속성에는 초기값이 없다. 

<HTML>
<HEAD>
<STYLE type="text/css">

P { font: bold italic large }
</STYLE>
<BODY>
<P>bold, italic, large</P>
<BODY>
</HTML>

▲ ▶