HTML DOM Style fontSizeAdjust 속성이란?
HTML DOM의 fontSizeAdjust 속성은 소문자 'x'와 대문자 'X'의 높이(x-height)를 기준으로 글꼴 크기를 설정하는 데 사용됩니다. 이 속성을 활용하면 서로 다른 글꼴 간에도 시각적인 크기를 일관되게 유지할 수 있어, 단순한 fontSize 속성보다 훨씬 세밀하게 글꼴 크기를 제어할 수 있습니다.
참고: 이 속성은 오랫동안 Mozilla Firefox에서만 지원되었지만, 최근에는 Chrome·Edge(127 이상)와 Safari(16.4 이상)에서도 지원 범위가 확대되었습니다.
문법(Syntax)
fontSizeAdjust 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.fontSizeAdjust = "none|number|initial|inherit"
속성값 설명
| 값 | 설명 |
|---|---|
| none | 글꼴 크기를 별도로 조정하지 않습니다. 기본값입니다. |
| number | 첫 번째 글꼴 크기의 x-height를 두 번째 값으로 나눈 뒤, 여기에 지정한 숫자를 곱하여 종횡비(aspect value)를 계산하는 데 사용됩니다. |
| initial | 이 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제
다음은 fontSizeAdjust 속성의 동작을 확인할 수 있는 예제입니다. 아래 버튼을 클릭하면 두 개의 div 요소에 적용된 fontSizeAdjust 값이 0.5에서 1로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
font-family: verdana;
}
.two {
font-family: 'times new roman';
}
#demo1, #demo2 {
font-size-adjust: 0.5;
}
</style>
<script>
function adjustFontSize() {
document.getElementById("demo1").style.fontSizeAdjust="1";
document.getElementById("demo2").style.fontSizeAdjust="1";
document.getElementById("Sample").innerHTML="The fontSizeAdjust property for the above text inside div is increased to 1";
}
</script>
</head>
<body>
<div class="one">This is demo text</div><br/>
<div id="demo1" class="one">This is demo text</div><br/>
<div class="two">This is demo text</div><br/>
<div id="demo2" class="two">This is demo text</div>
<p>Change the above div text fontSizeAdjust property by clicking the below button</p>
<button onclick="adjustFontSize()">Change fontSizeAdjust </button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지가 처음 로드된 화면입니다.
"Change fontSizeAdjust" 버튼을 클릭하면 다음과 같이 글꼴 크기가 조정됩니다.
정리
fontSizeAdjust 속성은 x-height 비율을 기반으로 글꼴 크기를 보정하여, 글꼴이 바뀌더라도 텍스트의 시각적 크기를 일정하게 유지해 주는 유용한 도구입니다. none(기본값), number, initial, inherit 네 가지 값을 지원하며, 특히 여러 글꼴을 혼용하는 웹 페이지에서 가독성을 높이는 데 효과적입니다.