font-size-adjust 속성

font-size-adjust 속성을 사용하면 font-size를 변경하지 않고 글꼴 크기를 제어할 수 있습니다 (확대 또는 축소).

적용 예: font-family에 쉼표로 구분하여 두 개의 글꼴을 지정했다고 가정합니다. 예를 들어, Georgia, "Times New Roman"입니다. 사용자 컴퓨터에 Georgia 글꼴이 없는 경우 "Times New Roman"이 적용됩니다. 그러나 여기서 문제가 발생합니다 - 동일한 font-size 값을 사용해도 글꼴은 다르게 보일 수 있습니다. 아래 예에서 두 단락 모두 font-size가 16px로 설정되었지만 font-family는 다릅니다. 크기가 어떻게 다른지 확인해 보세요:

<p style="font-size: 16px; font-family: Georgia;">
	Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
	Lorem ipsum dolor sit amet.
</p>

이는 표시되는 글꼴 크기가 전체 글꼴 크기만 정의하는 속성 font-size보다 font-size 속성 값과 x-height 크기의 비율에 더 크게 의존하기 때문입니다 (x-height는 특정 글꼴의 소문자 "x"와 대문자 "X" 사이의 크기 차이입니다).

이 비율을 글꼴의 가로세로비라고 하며 다음 공식으로 계산됩니다: 가로세로비 = font-size / x-height.

크기 문제는 font-size-adjust 속성으로 해결됩니다 (이 속성을 사용하면 글꼴의 가로세로비를 변경할 수 있음). 이 속성을 사용하면 두 번째 글꼴이 첫 번째 글꼴과 동일한 크기로 보이도록 만들 수 있습니다.

Times New Roman 글꼴이 Georgia와 동일한 크기가 되도록 만들어 봅시다. 우리는 Georgia의 가로세로비를 알고 있습니다 - 0.5입니다 (아래 표 참조).

Times New Roman이 적용된 텍스트의 font-size-adjust를 0.5 값으로 설정하면 두 번째 텍스트가 첫 번째 텍스트와 동일한 크기가 된 것을 볼 수 있습니다:

<p style="font-size: 16px; font-family: Georgia;">
	Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
	Lorem ipsum dolor sit amet.
</p>

구문

선택자 {
	font-size-adjust: 숫자 | none;
}

값

값	설명
`number`	숫자는 글꼴의 가로세로비를 지정합니다.
`none`	글꼴 크기 조정 없음.

기본값: none.

글꼴의 가로세로비 값을 어떻게 결정하나요?

W3C 사양의 일부를 확인하세요: 선택한 글꼴의 비율 계수(가로세로비)는 동일한 텍스트를 font-size-adjust 값을 다르게 하여 비교함으로써 계산할 수 있습니다. 속성 값이 올바르게 선택되면, 동일한 글꼴 크기에서 페이지에 사용된 모든 글꼴에 대해 텍스트가 변경되지 않습니다.

제가 알고 있는 일부 글꼴의 가로세로비 값은 다음과 같습니다: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

예제

동일한 font-size와 font-family를 사용하면서 다른 font-size-adjust 값으로 텍스트가 어떻게 보이는지 비교하세요:

<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: none;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.5;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.6;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

예제 . 실제 적용

아래 코드는 사용자 컴퓨터에 Georgia 글꼴이 없는 경우, 적용되는 글꼴 Times New Roman이 Georgia와 동일한 크기가 되도록 만듭니다:

<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
	aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

p {
	font-size: 16px;
	font-family: Georgia, "Times New Roman";
	font-size-adjust: 0.5;
}