CSS font-variant 속성 – 글꼴의 변형 스타일 지정 단축 속성

`font-variant` 속성의 이해

font-variant 속성은
글꼴의 변형 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다.

이 속성을 사용하면 텍스트의 대문자 스타일, 숫자 형식, 그리고 기타 글꼴 변형 스타일을 효율적으로 제어할 수 있습니다.

구성 속성

font-variant 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

font-variant 속성의 구성 속성
`font-variant-alternates`	글꼴의 기본 문자 모양을 글꼴에 포함된 변형할 수 있는 대체 스타일로 지정합니다.
`font-variant-caps`	요소의 텍스트를 소문자 대문자, 작은 대문자 또는 제목에 사용되는 변형된 대문자 등 다양한 대문자 변형 스타일로 지정합니다.
`font-variant-east-asian`	글꼴에 포함된 동아시아 글씨체에 관련된 변형을 적용할 수 있는 대체 스타일을 지정합니다.
`font-variant-emoji`	글꼴에 포함된 이모지에 관련된 변형을 적용할 수 있는 대체 스타일을 지정합니다.
`font-variant-ligatures`	조화로운 스타일을 위해 두 개 이상의 문자를 하나의 모양으로 결합하는 연결 문자(ligature)에 관련된 변형을 적용할 수 있는 대체 스타일을 지정합니다.
`font-variant-numeric`	숫자 형식(숫자, 분수, 순서형 마커 등)에 대해 글꼴 변형 스타일을 지정합니다.
`font-variant-position`	글꼴에서 위치 변형을 적용할 수 있는 대체 스타일을 지정합니다.

형식 구문

CSS

selector {
    font-variant: <font-variant-alternates> || 
                  <font-variant-caps> || 
                  <font-variant-east-asian> || 
                  <font-variant-emoji> || 
                  <font-variant-ligatures> || 
                  <font-variant-numeric> || 
                  <font-variant-position>
}

구문

CSS

/* <font-variant-alternates> 사용 */
font-variant: alternates; /* 대체 글리프 스타일을 지정 */

/* <font-variant-caps> 사용 */
font-variant: small-caps; /* 소문자를 대문자로 변환하여 표시 */

/* <font-variant-east-asian> 사용 */
font-variant: full-width; /* 전체 너비 문자로 변환 */

/* <font-variant-emoji> 사용 */
font-variant: emoji; /* 이모지 글꼴 변형 사용 */

/* <font-variant-ligatures> 사용 */
font-variant: common-ligatures; /* 공통 리가처 사용 */

/* <font-variant-numeric> 사용 */
font-variant: tabular-nums; /* 숫자를 고정 폭으로 표시 */

/* <font-variant-position> 사용 */
font-variant: sub; /* 아래 첨자 스타일을 적용 */

/* 여러 속성 조합 사용
   띄어쓰기로 구분하여 순서에 관계없이 작성 */
font-variant: small-caps normal-variant full-width; /* 소문자 대문자 변환과 전체 너비 문자를 함께 지정 */

/* 전역 값 */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;

값

font-variant 속성 값
`<font-variant-alternates>`	`font-variant-alternates` 속성 값
`<font-variant-caps>`	`font-variant-caps` 속성 값
`<font-variant-east-asian>`	`font-variant-east-asian` 속성 값
`<font-variant-emoji>`	`font-variant-emoji` 속성 값
`<font-variant-ligatures>`	`font-variant-ligatures` 속성 값
`<font-variant-numeric>`	`font-variant-numeric` 속성 값
`<font-variant-position>`	`font-variant-position` 속성 값

특정 구성 속성은 일부 글꼴에서만 지원될 수 있으며, 브라우저에 따라 지원이 제한적일 수 있습니다. 따라서 사용 전에 글꼴과 브라우저의 지원 상태를 확인하세요.
참고자료: caniuse.comd에서 브라우저 호환성 보기

font-variant 속성은 각 구성 속성에 대해 하나의 값만 사용할 수 있으며, 여러 구성 속성의 값을 지정하려면 띄어쓰기로 구분하여 순서에 관계없이 작성합니다.

하나의 구성 속성 값을 지정할 경우

여러 구성 속성의 값을 지정할 경우

CSS Level 2.1에서 정의한 `font-variant`

font-variant 속성이 CSS 2.1에서는 단순히 텍스트를 기본 형식(normal)으로 유지하거나, 소문자를 작은 대문자(small-caps)로 바꾸는 데 사용되었습니다.

CSS Fonts Module Level 3부터는 단축 속성으로 확장

CSS Fonts Module Level 3부터는 font-variant가 구성 속성들(font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, font-variant-position)의 단축 속성(shorthand property)으로 확장되었습니다.

형식 정의

font-variant 속성의 형식 정의
초깃값	`normal`
적용 요소	모든 요소
상속	예
애니메이션	아니오

주의할 점

font-variant 속성은 단축 속성(shorthand property)이기 때문에, 이 속성에 값을 새로 지정하면 기존에 지정한 개별 구성 속성들이 모두 덮어씌워집니다.
즉, font-variant 속성을 사용하여 한 번에 지정하면, 각 구성 요소에 대해 개별적으로 설정한 값들도 초기화되어 새로운 값으로만 설정됩니다.

예제를 통해 살펴보겠습니다.

CSS

/* 개별 구성 속성 지정 */
p {
    font-size: 2em;
    font-variant-numeric: slashed-zero;
}

/* font-variant 단축 속성 사용 */
p.special {
    font-variant: small-caps; /* font-variant-numeric이 초기화(normal)되고, small-caps로만 설정됨 */
}

예제

브라우저 호환성

font-variant 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`font-variant`	1	12	1	1
`CSS Fonts Module Level 3 단축 속성(shorthand property)`	52	79	34	9.1

명세서

font-variant 속성의 명세서 사양
명세서 사양
`font-variant`	CSS Fonts Module Level 4 #font-variant-prop

참고문헌

MDN - font-variant

font-variant 속성의 이해