폰트의 종류, 크기, 행간, 스타일, 굵기, 대소문자 처리를 한번에 설정하는 속기 속성이다.
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-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<absolute-size> | <relative-size> | <length-percentage>
유저 에이전트가 계산하고 보관하는 글꼴 크기를 키워드로 나타내는 타입이다.
xx-small | x-small | small | medium | large | x-large | xx-large
font-size: small;
.sub-title { font-size: small; }
medium
보다 큰 크기이다.
중간 크기로 지정한다.
작게 설정한다.
large
보다 더 큰 크기로 지정한다.
small
보다 더 작게 설정한다.
최대 크기로 지정한다.
최대로 작게 설정한다.
<length>
와 <percentage>
타입을 나타낸다.
<length> | <percentage>
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
현재 글꼴 크기를 기준으로 상대적으로 크기를 지정하는 키워드를 나타낸다.
larger | smaller
현재 크기를 기준으로 상대적으로 한단계씩 더 크게 지정한다.
현재 크기를 기준으로 상대적으로 한단계씩 더 작게 지정한다.
normal | italic | oblique
normal | italic | oblique <angle>?
CSS Fonts Module Level 4에서는 oblique
를 지정시 각도를 직접 지정할 수 있다. -90deg
보다 작은 값이나 90deg
보다 큰 값은 유효하지 않다. 각도가 지정되지 않으면 14deg
로 처리한다.
현재 파이어폭스(Firefox)는 지원하지만 다른 웹브라우저는 확인이 필요하다.
0~360도 범위의 각도 값을 deg
(도), grad
(그레이드), rad
(라디안), turn
(턴) 단위로 표현한다.
<angle>
데이터 타입은 <number>
타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0
인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +
, -
부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
기울임꼴로 지정된 글꼴을 사용한다. 만약에 사용할 수 없다면 비스듬한 글꼴(oblique
)을 사용한다. 둘 다 사용할 수 없다면 인위적으로 시물레이션이 된다.
기울임꼴이나 비스듬한 형태가 아닌 일반 형태를 나타낸다.
비스듬한 면으로 지정된 글꼴을 선택한다. 면이 비스듬한 글꼴을 사용할 수 없다면 기울임꼴(italic
)로 분류된 면이 대신 사용된다. 둘 다 사용할 수 없다면 인위적으로 시물레이션 된다.
추가적으로 <angle> 값을 사용하여 기울기 각도를 조정할 수 있다.
현재 파이어폭스 이외의 웹브라우저는 확인이 필요하다.
<font-weight-absolute> | bolder | lighter
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight
속성에 사용되는 글꼴 굵기의 절대값을 나타낸다.
[normal | bold | <number [1,1000]>]
얇은 두께로 처리한다.
매우 가볍게 처리한다.
가벼운 두께로 지정한다.
일반 굵기로 지정한다.
중간 굵기로 지정한다.
'700
'의 반 굵기로 지정한다.
굵게 지정한다.
매우 굵게 지정한다.
매우 무겁게 지정한다.
'700
' 값과 동일하다.
'400
' 값과 동일하다.
상속된 값보다 굵은 가중치를 지정한다.
상속된 값보다 가벼운 가중치를 지정한다.
텍스트를 넓이거나 좁히는 키워드를 나타낸다. CSS Fonts Module Level 4의 font
속기 속성에만 사용되는 font-stretch
값을 따로 분류하기 위해서 정한 유형이다.
[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]
normal
보다 압축된 글꼴을 지정한다.
normal
보다 확장한다.
normal
보다 더 압축한다.
normal
보다 더 확장한다.
일반 글꼴을 지정한다.
condensed
값의 반 정도의 압축을 한다.
expanded
값보다 반 정도 확장한다.
normal
보다 더 초압축된 글꼴을 지정한다.
normal
보다 더 최대 확장한다.
CSS Fonts Module Level 4의 font
속기 속성에만 사용되는 CSS 2의 font-variant
값을 따로 분류하기 위해서 정한 유형이다.
normal | small-caps
활성화된 값이 없다.
작은 대문자 표시를 활성화한다. 글리프(glyphs) 타입의 폰트는 일반적으로 대문자 형태를 사용하지만 소문자 크기로 축소된다.
캡션이 있는 폼 컨트롤에 사용되는 글꼴을 나타낸다.
아이콘에 레이블을 지정하는 데 사용되는 글꼴이다.
메뉴에 사용되는 글꼴을 나타낸다.
대화 상자에 사용되는 글꼴을 나타낸다.
작은 컨트롤에 레이블을 지정하는 데 사용되는 글꼴을 나타낸다.
창 상태 표시줄에 사용되는 글꼴을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
글꼴의 크기를 설정한다.
텍스트를 넓히거나 좁힐 수 있다.
글꼴의 모양을 설정한다.
font-variant
하위의 모든 속성(font-variant-*
)을 속기로 설정할 수 있다.
폰트의 굵기를 설정한다.
콘텐츠의 행간을 조정한다.
font: italic small-caps bold 30px/1.7 'Mansalva';
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Fonts Module Level 4 | 초안 작업 | Last review date: 2022-6-18 |