목차
- font-size-adjust 예제 - 소문자 x 높이 기준으로 대체 글꼴 크기 재조정
- font-size-adjust 정의
- font-size-adjust 구문
font-size-adjust 예제 - 소문자 x 높이 기준으로 대체 글꼴 크기 재조정
※ Chrome, Safari 최신 브라우저로 봐야 효과 확인 가능.
<style>
div.a {font-family: verdana;}
div.b {font-family: 'times new roman';}
#hz1, #hz2 {font-size-adjust: 0.58;}
</style>
<div id="hz1" class="a">홈짱닷컴 Homzzang.com</div>
<div id="hz2" class="b">홈짱닷컴 Homzzang.com</div>
<div class="a">홈짱닷컴 Homzzang.com</div>
<div class="b">홈짱닷컴 Homzzang.com</div>
결과보기
font-size-adjust 정의
소문자 x 높이 기준으로, 대체 글꼴 크기 재조정.
1.
- 대체 글꼴 사용 시, 기존 글꼴의 소문자 x 높이(= 소문자 x의 상단부터 하단까지 거리)를 기준으로 대체 글꼴의 크기를 재조정해 가독성을 높임.
- cf. font-size 속성 - 글꼴 크기 지정.
2.
- 기본값: none
- 적용대상: 모든 요소. (::first-letter 및 ::first-line 선택자에도 적용됨.)
- 상속여부: O
- 애니가능: O
- CSS버전: CSS3
- JS구문: object.style.fontSizeAdjust="0.58";
3.
(Safari/Firefox) 최신 브라우저만 지원.
4. MDN font-size-adjust 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
font-size-adjust 구문
selector {font-size-adjust: number|none|initial|inherit;}
[속성값]
number
기본글꼴 소문자 x 높이의 배수 지정.
- 소문자 x 높이가 글꼴 크기의 지정된 배수가 되도록 대체 글꼴의 글꼴 크기를 조정.
- 0 ~ ∞ 값 가능. (※ 0 선택 시, 글자가 숨겨짐.)
- 음수값은 허용 X
none
글꼴 크기를 재조정 X. (기본값)
from-font
기본 글꼴의 x 높이 제원 사용.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
