[font] CSS - font-kerning 속성 - 문자 모양 고려해, 문자 사이 간격 지정 (= font-kerning속성 = 폰트커닝속성)

1. font-kerning 예제 - 개별 문자 사이의 간격 지정
2. font-kerning 정의
3. font-kerning 구문

font-kerning 예제 - 개별 문자 사이의 간격 지정

 

<style> 

/* font kerning 적용 O */

.hz1 { font-kerning: normal; }

/* font kerning 적용 X */

.hz2 { font-kerning: none; }

</style>

<div class="hz1">Welcome to 홈짱닷컴 Homzzang.com</div>

<div class="hz2">Welcome to 홈짱닷컴 Homzzang.com</div>

 

결과보기

font-kerning 정의

 

개별 문자의  Kerning (커닝: 글자 모양 때문에 활자가 고르게 배열 안 된 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정해 시각적으로 매끄럽게 보이도록 함.) 여부 지정.

 

---

 

1.

• 각 문자 공간의 여백에 다른 문자의 획을 넣을지 여부 (예) AV
• 커닝(Kerning) 적용 시, 좀 더 오밀조밀 정돈된 느낌이 남.
• 커닝(Kerning) 데이터 포함 않는 폰트 경우엔 효과 발생 X.
• cf. letter-spacing 속성 - 글자 사이의 간격 너비 지정.

 

2.

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

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN font-kerning 예제보기

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

 

font-kerning 구문

 

selector {font-kerning: auto|normal|none;}

 

---

[속성값]

 

auto

브라우저가 자동 결정. (기본값)

 

normal

커닝 적용 O

 

none

커닝 적용 X