[font] CSS - font-size-adjust 속성 - 소문자 x 높이 기준으로, 대체 글꼴 크기 재조정 (= font-size-adjust속성 = 폰트사이즈어저스트속성)

1. font-size-adjust 예제 - 소문자 x 높이 기준으로 대체 글꼴 크기 재조정
2. font-size-adjust 정의
3. 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

부모요소의 속성값 상속.