폰트의 종류, 크기, 행간, 스타일, 굵기, 대소문자 처리를 한번에 설정하는 속기 속성이다.
font-style
, font-variant
, font-weight
, font-stretch
, font-size
,line-height
, font-family
속성을 한번에 설정하기 위한 속기 속성이다.
font-variant
속성 값도 포함할 수 있지만 CSS 2.1에서 지원되는 값(<font-variant-css2> 타입)만 가능하다. CSS Fonts Module Level 3 또는 4에 추가된 font-variant
속성 값중 어느 것도 속기 속성에 사용할 수 없다.
<font-variant-css2> = [normal | small-caps]
font-stretch
속성 값도 포함될 수 있지만 CSS Fonts Module Level 3에서 지원되는 값만 포함할 수 있으며 CSS Fonts Module Level 4에 추가된 font-stretch
속성 값은 사용할 수 없다.
<font-stretch-css3> = [normal | ultra-condensed | extra-condensed | condensed |
semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded]
font
속기 속성에 사용되는 타입이다.
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
캡션이 있는 폼 컨트롤에 사용되는 글꼴을 나타낸다.
아이콘에 레이블을 지정하는 데 사용되는 글꼴이다.
메뉴에 사용되는 글꼴을 나타낸다.
대화 상자에 사용되는 글꼴을 나타낸다.
작은 컨트롤에 레이블을 지정하는 데 사용되는 글꼴을 나타낸다.
창 상태 표시줄에 사용되는 글꼴을 나타낸다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
font-size
속성에 사용되는 타입이다.
CSS에서 글꼴 크기를 지정하는 다양한 값을 나타내는 타입이다.
<absolute-size> | <relative-size> | <length-percentage>
font-style
속성에 사용되는 타입이다.
normal | italic | oblique
normal | italic | oblique <angle>?
CSS Fonts Module Level 4에서는 oblique
를 지정시 각도를 직접 지정할 수 있다. -90deg
보다 작은 값이나 90deg
보다 큰 값은 유효하지 않다. 각도가 지정되지 않으면 14deg
로 처리한다.
현재 파이어폭스(Firefox)는 지원하지만 다른 웹브라우저는 확인이 필요하다.
font-weight
속성에 사용되는 타입이다.
<font-weight-absolute> | bolder | lighter
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
텍스트를 넓이거나 좁히는 키워드를 나타낸다. CSS Fonts Module Level 4의 font
속기 속성에만 사용되는 font-stretch
값을 따로 분류하기 위해서 정한 유형이다.
[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]
CSS Fonts Module Level 4의 font
속기 속성에만 사용되는 CSS 2의 font-variant
값을 따로 분류하기 위해서 정한 유형이다.
normal | small-caps
font: italic small-caps bold 30px/1.7 'Mansalva';