[CSS] 예제로 보여주는 폰트 스타일(font style)

* CSS에서 제공해주는 font 의 스카일을 예제로 알아보자.

: 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 다르게 표시될수도 있다.

* 각 스타일에 대한 예제이다.

* 아래는 각 스타일에 대한 설명이다.

: font-family는 가장 먼저 존재하는 폰트를 적용하게 된다. (아래에 스펙 정리)

style="font-family: Helvetica, Verdana, sans-serif;"

style="font-family: Verdana, sans-serif;"

style="font-family: 굴림;"

style="font-family: 바탕;"

style="font-family: 궁서;"

style="font-family: 새굴림;"

: font-weight의 예

style="font-weight:normal"

style="font-weight:bold"

style="font-weight:bolder"

style="font-weight:lighter"

style="font-weight:100"

style="font-weight:200"

style="font-weight:300"

style="font-weight:400"

style="font-weight:500"

style="font-weight:600"

style="font-weight:700"

style="font-weight:800"

style="font-weight:900"

* font-weight를 숫자로 나타내면 해당하는 폰트에서 지원하는 weight만 나타나게 된다. 보통은 400, bold는 700을 기준으로 한다.

: font-style의 예

style="font-style: normal"

style="font-style: italic"

style="font-style: oblique"

* italic과 oblique는 시각적으로 같으나 italic은 폰트안에서 설정해줘야하는 스타일이고, oblique는 폰트 자체를 8~12도 정도 뉘운 스타일이다.

:font-size의 예

style="font-size: xx-small"

style="font-size:8pt"

style="font-size:10pt"

style="font-size:12pt"

style="font-size:14pt"

style="font-size:18pt"

style="font-size:24pt"

style="font-size:12pt"

style="font-size:14pt"

style="font-size:18pt"

style="font-size:18pt"

style="font-size:0.5em"

style="font-size:1em"

style="font-size:1.5em"

style="font-size:2em"

style="font-size:50%"

style="font-size:100%"

style="font-size:150%"

style="font-size:200%"

: font의 예

style="font: 12pt/14pt sans-serif"

style="font: 80% sans-serif"

style="font: bold italic large Palatino, serif"

style="font: normal small-caps 120%/120% fantasy"

style="font: oblique 12pt Helvetica, serif"

* 폰트의 종류를 선택

font-family

= <family name> | <generic name>

: 클라이언트마다 font-family가 달라지긴하지만 기본적으로 바탕, 굴림, 돋움, 궁서가 많이 쓰이고, 영어는 sans-serif, serif, cursive, fantasy, monospace를 많이 사용한다.

* 폰트의 두께를 설정

font-weight

= normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

: 100 - Thin ~ 900 - Heavy 로 이루어져있고, 폰트에서 지원하는 두께만을 표시한다. 400이 기본이고, 그것보다 작아지면 얇아지고 커지면 두꺼워진다.

: normal = 400, bold = 700, bolder와 lighter는 부모로부터 inherit된 값에 따라 달라진다.

* 폰트의 스타일을 설정

font-style

= normal | italic | oblique

: 기본은 normal이고 외적으로 italic과 oblique는 같으나 내부적으로 처리하는 방법이 다르다. italic은 폰트 내에서 같이 제공을 해줘야하지만 oblique는 폰트 자체를 눕히게 되는 것이다.

* 폰트 크기를 설정

font-size

= xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 10pt ... 20pt | 1em ... 2em | 100% ... 200%

* 폰트를 한번에 설정

font

= [font-style | font-weight]  font-size [/line-height]  font-family

: 한번에 하려면 위와 같은 순서대로 쓰면 한번에 설정이 가능하다.

* 폰트 스타일 설정을 설정

@font-face

{ <font-description> }

: 여기서 <font-description>의 포맷은 아래와 같다.

descriptor: value;

descriptor: value;

: 그래서 만약에 온라인에 있는 새로운 폰트를 정의하고자 한다면 @font-face를 사용하면 된다.

@font-face {
    font-family: MyFont;
    src: url(http://myhome.com/fonts/myfont.ttf);
    font-weight: bold;
}

p {
    font-family: MyFont;
}

: 굳이 원격에 있는 서버 폰트를 사용하지 않아도 로컬에서 자주사용하는 폰트 스타일이 있다면 위와 같이 font-face를 이용해서 정의해두고 사용하면 된다.

끝.