목차
- font-kerning 예제 - 개별 문자 사이의 간격 지정
- font-kerning 정의
- 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
