font-feature-settings

font-feature-settings CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다.

문법

/* 기본값 사용 */
font-feature-settings: normal;

/* 오픈타입 피처 태그에 대해 값 설정 */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

/* 전역 값 사용 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;

가능하다면 단축 속성인 font-variant 속성을 사용하거나, 각각의 피처와 연관된 font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numericfont-variant-position 등을 사용하는 것이 font-feature-settings를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.

이는 font-feature-settings는 원래 작은 대문자(Small caps)와 같이 접근할 수 있는 다른 방법이 없는 오픈타입 피처를 제어하기 위해 만들어진 저수준의 기능이기 때문입니다.

normal
기본값을 이용하여 텍스트를 표시합니다.
<feature-tag-value>
텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 <string>이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 U+20U+7E 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.
값은 양의 정수 값을 가집니다. 각각 10과 같은 의미를 가지는 키워드 on 과 off도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 1입니다. stylistic alternates와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.

Formal definition

초기값normal
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | <feature-tag-value>#

where
<feature-tag-value> = <string> [ <integer> | on | off ]?

예시

다양한 오픈타입 피처 활성화

/* 작은 대문자(small-caps) 대체 글리프를 사용합니다. */
.smallcaps { font-feature-settings: "smcp" on; }

/* 대문자와 소문자를 모두 작은 대문자로 변환합니다.(문장부호도 영향을 받습니다.)*/
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* 영문 대문자 "O"와 구분하기 위해 대각선이 그려진 숫자 0을 사용합니다. */
.nicezero { font-feature-settings: "zero"; }

/* '역사적인' 형태를 사용하기 위해 'hist' 피처를 활성화합니다. */
.hist { font-feature-settings: "hist"; }

/* 표준합자(common ligatures)를 비활성화 합니다. 기본값은 활성 상태입니다. */
.noligs { font-feature-settings: "liga" 0; }

/* 고정폭 숫자(tabular figures)를 사용합니다. */
td.tabular { font-feature-settings: "tnum"; }

/* 자동 분수 입력을 활성화합니다. */
.fractions { font-feature-settings: "frac"; }

/* 가능한 swash 문자 중 두번째를 사용합니다. */
.swash { font-feature-settings: "swsh" 2; }

/* 스타일 세트(stylistic set) 7번을 사용합니다. */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-feature-settings' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-feature-settingsChrome Full support 48
Full support 48
Full support 16
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 15Firefox Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE Full support 10Opera Full support 35
Full support 35
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9.1
Full support 9.1
No support 4 — 6
WebView Android Full support 4.4Chrome Android Full support 48Firefox Android Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android Full support 35
Full support 35
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9.3
Full support 9.3
No support 3.2 — 6.1
Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also