font-variant속기상속 및 애니메이션은 개별 속성 참고

사용 가능한 값 타입

〈'font-variant'〉

• CSS Fonts Module Level 3

  normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [ sub | super ] ]

• CSS Fonts Module Level 4

  normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <font-variant-notation> || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [ sub | super ] ]

  CSS Fonts Module Level 4 사양에서는 기존 CSS Fonts Module Level 3에 몇 가지 항목들이 추가되었다. 아래의 하위 타입인 <font-variant-notation>을 확인하기 바란다.

사용되는 키워드

• all-petite-caps

  대문자 및 소문자 모두에 대해 작은 대문자 표시를 활성화한다.

• all-small-caps

  대문자 및 소문자 모두 작은 대문자 표시로 활성화한다.

• normal

  활성화된 값이 없다.

• ordinal

  첫째, 둘째, .. 표현과 같은 서수 번호와 함께 사용되는 문자 양식을 표시한다.

• petite-caps

  작은 대문자 표시를 활성화한다.

• ruby

  루비 변형 글리프 표시를 활성화한다. 루비 텍스트는 일반적으로 연결된 본문 텍스트보다 작기 때문에 글꼴 디자이너는 기본 글리프의 축소 버전보다 더 읽기 쉬운 루비와 함께 사용할 특수 글리프를 디자인할 수 있다. 글리프 선택만 영향을 받으며 관련 글꼴 크기 조정 또는 라인 레이아웃에 영향을 미치는 다른 변경 사항은 없다.

• slashed-zero

  슬래시가 들어간 숫자 0 표시를 활성화한다.

• small-caps

  작은 대문자 표시를 활성화한다. 글리프(glyphs) 타입의 폰트는  일반적으로 대문자 형태를 사용하지만 소문자 크기로 축소된다.

• titling-caps

  제목 대문자 표시를 활성화한다.

• unicase

  대문자에 대한 작은 대문자와 일반 소문자 혼합 표시를 활성화한다.

• sub

  아라비아 숫자 변형 표시를 활성화한다.

• super

  위첨자 변형 표시를 활성화한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

• 〈font-variant-notation〉

  글꼴의 모양을 변경하는 구문 형식을 나타낸다.

  • CSS Fonts Module Level 4

    [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]

• 〈common-lig-values〉

  글꼴의 공통 합자 표시를 활성 또는 비활성한 키워드를 나타낸다.

  • CSS Fonts Module Level 3

    [ common-ligatures | no-common-ligatures ]

• 〈contextual-alt-values〉

  문맥 대체 표시를 활성 또는 비활성한 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ contextual | no-contextual ]

• 〈discretionary-lig-values〉

  임의 합자를 표시하거나 표시하지 않는 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ discretionary-ligatures | no-discretionary-ligatures ]

• 〈east-asian-variant-values〉

  동아시아 텍스트에서 글리프(glyph)의 렌더링을 제어하는 키워드를 나타낸다.

  • CSS Fonts Module Level 3

    [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

• 〈east-asian-width-values〉

  동아시아 텍스트에서 글리프(glyph)의 크기 조정을 제어하는 키워드를 나타낸다.

  • CSS Fonts Module Level 3

    [ full-width | proportional-width ]

• 〈historical-lig-values〉

  기록 합자 표시를 활성하거나 비활성한 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ historical-ligatures | no-historical-ligatures ]

• 〈numeric-figure-values〉

  숫자 표시 방법에 대한 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ lining-nums | oldstyle-nums ]

• 〈numeric-fraction-values〉

  분수(fraction) 표시 방법에 대한 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ diagonal-fractions | stacked-fractions ]

• 〈numeric-spacing-values〉

  숫자가 표시되는 공간를 제어하는 값을 나타낸다.

  • CSS Fonts Module Level 3

    [ proportional-nums | tabular-nums ]