Properties

Properties

Editing
  • account_tree
  • bug_report

font-variant

font-variant 하위의 모든 속성(font-variant-*)을 속기로 설정할 수 있다.

설명

normal 값은 font-variant의 모든 하위 속성을 초기 값으로 재설정한다. nonefont-variant-ligaturesnone으로 설정하고 다른 모든 글꼴 기능 속성을 초기 값으로 재설정한다. 다른 속기 속성처럼 font-variant 속성을 사용하면 지정되지 않은 font-variant 하위 속성이 초기 값으로 재설정된다.

font-language, font-feature-settings, font-variation-settings 속성 값은 재설정되지 않는다.

사용 가능한 값 타입

<'font-variant'>

DEVDIC-Specified Data Types

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>을 확인하기 바란다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <font-variant-notation>

    DEVDIC-Specified Data Types

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

    • 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>) ]
    Details

    사용되는 키워드

    • historical-forms

      CSS Fonts Module Level 4

      기록 양식 표시를 활성화한다.(OpenType 기능(feature): hist)

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

  • <common-lig-values>

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

    • CSS Fonts Module Level 3
      [ common-ligatures | no-common-ligatures ]
    Details

    사용되는 키워드

    • common-ligatures

      일반 합자를 표시할 수 있다. (OpenType feature: liga, clig)

    • no-common-ligatures

      일반 합자의 표시를 비활성화한다.

  • <contextual-alt-values>

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

    • CSS Fonts Module Level 3
      [ contextual | no-contextual ]
    Details

    사용되는 키워드

    • contextual

      컨텍스트 대체 표시를 활성화한다.

    • no-contextual

      컨텍스트 대체 표시를 비활성화한다.

  • <discretionary-lig-values>

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

    • CSS Fonts Module Level 3
      [ discretionary-ligatures | no-discretionary-ligatures ]
    Details

    사용되는 키워드

    • discretionary-ligatures

      임의 합자의 표시를 활성화한다.(OpenType feature: dlig)

    • no-discretionary-ligatures

      임의 합자의 표시를 비활성화한다.

  • <east-asian-variant-values>

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

    • CSS Fonts Module Level 3
      [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
    Details

    사용되는 키워드

    • jis04

      JIS2004 형식의 렌더링을 활성화한다.

    • jis78

      JIS78 형식의 렌더링을 활성화한다.

    • jis83

      JIS83 형식의 렌더링을 활성화한다.

    • jis90

      JIS90 형식의 렌더링을 활성화한다.

    • simplified

      단순화된 형식의 렌더링을 활성화한다.

    • traditional

      기존 형식의 렌더링을 활성화한다.

  • <east-asian-width-values>

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

    • CSS Fonts Module Level 3
      [ full-width | proportional-width ]
    Details

    사용되는 키워드

    • full-width

      전체 너비 변형의 렌더링을 활성화한다.

    • proportional-width

      비례 간격 변형의 렌더링을 활성화한다.

  • <historical-lig-values>

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

    • CSS Fonts Module Level 3
      [ historical-ligatures | no-historical-ligatures ]
    Details

    사용되는 키워드

    • historical-ligatures

      기록 합자를 표시할 수 있다. (OpenType feature: hlig)

    • no-historical-ligatures

      기록 합자의 표시를 비활성화한다.

  • <numeric-figure-values>

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

    • CSS Fonts Module Level 3
      [ lining-nums | oldstyle-nums ]
    Details

    사용되는 키워드

    • lining-nums

      내부의 숫자 표시를 활성화한다.

    • oldstyle-nums

      구식 숫자 표시를 활성화한다.

  • <numeric-fraction-values>

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

    • CSS Fonts Module Level 3
      [ diagonal-fractions | stacked-fractions ]
    Details

    사용되는 키워드

    • diagonal-fractions

      안쪽 대각선 분수 표시를 활성화한다.

    • stacked-fractions

      안쪽에 누적 분수 표시를 활성화한다.

  • <numeric-spacing-values>

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

    • CSS Fonts Module Level 3
      [ proportional-nums | tabular-nums ]
    Details

    사용되는 키워드

    • proportional-nums

      비례 숫자 표시를 활성화한다. 각 숫자가 차지하는 공간을 가지며 표시된다. OpenType의 pnum에 해당한다.

    • tabular-nums

      표 형식의 숫자 표시를 활성화한다. 숫자의 비례 및 간격을 동일하게 하여 숫자를 비교하기 쉽게 한다. OpenType의 tnum에 해당한다.

사용되는 키워드

  • all-petite-caps

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

  • all-small-caps

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

  • normal

    활성화된 값이 없다.

  • ordinal

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

  • petite-caps

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

  • ruby

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

  • slashed-zero

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

  • small-caps

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

  • titling-caps

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

  • unicase

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

  • sub

    CSS Fonts Module Level 3

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

  • super

    CSS Fonts Module Level 3

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

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'font-variant'〉normal
    CSS Fonts Module Level 4

    활성화된 값이 없다.

    정상적인 글꼴로 출력한다. 모든 하위 속성을 초기 값으로 재설정한다.

  • CSS Fonts Module Level 4

     font-variant-ligaturesnone으로 설정하고 다른 모든 글꼴 기능 속성을 초기 값으로 재설정한다.

구문

  • font-variant: small-caps;
    CSS Fonts Module Level 4
    font-variant 속성을 small-cap으로 설정 결과
  • object.style.fontVariant = "small-cap";
    CSS Fonts Module Level 4

버전 명세

Modules
Module NameStatusSummary
CSS Fonts Module Level 3권장

Last review date: 2022-6-18

CSS Fonts Module Level 4초안 작업

Last review date: 2022-6-18

지원 웹브라우저