Properties

Properties

Editing
  • account_tree
  • bug_report

font-variant-alternates

글꼴의 기본 글리프(glyphs) 외에도 다양한 대체 글리프(glyphs)를 제공하도록 대체 글리프(glyphs)의 선택을 제어한다. @font-feature-values 앳룰(at-rule)에서 선언된 대체 글리프(glyph) 이름으로 참조된다.

설명

글리프(glyph)

글리프(glyph)는 글자의 모양을 가리킨다. 글꼴마다 독창적인 글자 모양을 갖는 것은 글리프(glyph)가 존재하기 때문이라고 할 수 있다.

대체 글리프(glyph)

대체 글리프(glyph)은 해당 글꼴에서 기본적으로 보여지는 글자 모양이외에 추가적으로 제공되는 글자 모양을 의미한다. 물론 모든 글꼴이 기술적으로 대체 글리프(glyph)를 지원하는 것은 아니다. 기술적으로 대체 글리프(glyph)가 가능한 글꼴의 포맷은 OpenType이다. OpenType에 대한 상세는 위키를 참고한다.

OpenType 포맷의 글꼴이라고 해서 대체 글리프(glyph)를 모두 가지고 있는 것은 아니다. 글꼴 개발자가 추가적인 글리프(glyph)를 지원해야 한다.

대체 글리프(glyph)는 OpenType 포맷이 가지고 있는 기능(feature)이라는 메커니즘을 사용한다. 이 기능(feature)을 통해 다양한 지원을 하고 있고 대체 글리프(glyph)도 해당된다. 대체 글리프(glyph)는 글꼴 개발자가 정한 태그를 사용해서 글리프(glyph)를 선택하는 인덱스를 지정한다. 태그는 해당 글꼴 레퍼런스를 참고하거나 글꼴의 정보를 분석해 주는 wakamaifondue.com  웹서비스를 이용해도 된다.

대체 글리프(glyph) 적용

대체 글리프를 사용하기 위해서는 @font-feature-values 앳룰(at-rule)로 선언을 해야 한다. 선언하는 구문은 <@font-feature-values> 참고한다.

대체 글리프 선언
@font-face {
 	src: url("/assist/resources/fonts/normal/MonteCarlo-Regular.otf") format("opentype");
    font-family: MonteCarlo;
}
@font-feature-values MonteCarlo {
  @swash {
    variant: 1;
  }
  @styleset {
  	ss03: 5;    
  }
}

앳룰(at-rule)로 선언된 대체 글리프(glyph)를 적용하고자 할 때는 원하는 선택자에 font-variant-alternates 속성의 값으로 <font-feature-value-type>에 맞는 함수의 인수로 선언된 이름(<feature-value-name>)을 지정해 주면 된다.

대체 글리프 적용
.title {
	font-variant-alternates: swash(variant) styleset(ss03);
}

 

사용 가능한 값 타입

<'font-variant-alternates'>

DEVDIC-Specified Data Types

font-variant-alternates 속성에 사용되는 타입이다.

  • CSS Fonts Module Level 4
    normal | [ 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>) ]

사용되는 키워드

  • historical-forms

    CSS Fonts Module Level 4

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

  • normal

    기능을 지정하지 않는다.

관련 @Rules

관련 함수

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

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

예제

한 개 이상의 변형 글리프(glyph)를 적용

버전 명세

Modules
Module NameStatusSummary
CSS Fonts Module Level 4초안 작업

Last review date: 2022-6-18

참조 목록

지원 웹브라우저