[font] CSS - font-feature-settings 속성 - OpenType 글꼴의 고급 인쇄 기능 제어 (= font-feature-settings속성 = 폰트피쳐세팅스속성/폰트피처세팅스속성)

1. font-feature-settings 예제 - OpenType 글꼴의 고급 인쇄 기능 제어
2. font-feature-settings 정의
3. font-feature-settings 구문

font-feature-settings 예제 - OpenType 글꼴의 고급 인쇄 기능 제어

 

<style> 

/* 작은대문자(small-caps) 활성화 */

.hz1 { font-feature-settings: "smcp" on; }

/* 대문자(uppercase)와 소문자(lowercase) 모두들 작은대문자(small caps)로 변환. */

.hz2 { font-feature-settings: "c2sc", "smcp"; }

/* 공통 합자( ligatures) 없음. */

.hz3 { font-feature-settings: "liga" 0; }

/* 자동 분수(fractions) 활성화 */

.hz4 { font-feature-settings: "frac"; }

</style>

<p  class="hz1">홈짱닷컴 Homzzang.com Since 2012</p>

<p  class="hz2">홈짱닷컴 Homzzang.com Since 2012</p>

<p  class="hz3">홈짱닷컴 Homzzang.com Since 2012</p>

<p  class="hz4">홈짱닷컴 Homzzang.com Since 2012</p>

 

결과보기

font-feature-settings 정의

 

OpenType 글꼴의 고급 인쇄 기능 제어.

 

---

 

1.

• 기본값: normal
• 적용대상: 모든 요소. (::first-letter 및 ::first-line 선택자에도 적용됨.)
• 상속여부: O
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.fontFeatureSettings="normal";

 

2.

IE 10 이상 주요 최신 브라우저 모두 지원.

 

3. MDN font-feature-settings 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings

 

font-feature-settings 구문

 

selector {font-feature-settings: normal|feature-value|initial|inherit;}

 

---

[속성값]

 

normal

기본 설정 사용해 텍스트 레이아웃 사용. (기본값)

 

feature-value

글꼴 형상값 지정.

• 필수. 4글자로 된 ASCII 문자. (① 여러 개 사용 시, 쉼표(,)로 구분 나열. ② 따옴표로 묶음 O.) (예) "smcp"
• 선택. ASCII 문자 뒤에  [1|0|on|off] 중 1개의 값을 띄어씀. ※ 따옴표로 묶음 X. (예) "smcp" on

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.