font-feature-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

시도해보기

문법

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-numeric, font-variant-position 등을 사용하는 것이 font-feature-settings를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.

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

값

  • normal

    • : 기본값을 이용하여 텍스트를 표시합니다.

  • <feature-tag-value>

    • : 텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 <string>이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 U+20 – U+7E 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.

    값은 양의 정수 값을 가집니다. 각각 1, 0과 같은 의미를 가지는 키워드 on 과 off도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 1입니다. stylistic alternates와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.

Formal definition

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

Formal syntax

font-feature-settings = 
  normal                |
  <feature-tag-value>#  

<feature-tag-value> = 
  <opentype-tag> [ <integer [0,∞]> | on | off ]?  

<opentype-tag> = 
  <string>

예시

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

css
/* 작은 대문자(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";
}

명세서

Specification
CSS Fonts Module Level 4
# font-feature-settings-prop

브라우저 호환성

BCD tables only load in the browser

See also