웹 글꼴이 로드되면 두 글꼴이 모두 동일한 font-size로 설정되어 있더라도 크기가 다른 대체 글꼴로 대체되는 경우가 많습니다. 이로 인해 '레이아웃 변경' (누적 레이아웃 변경)이 발생하며, 대체 글꼴의 소문자 (x-높이)가 기본 글꼴과 크게 다른 경우 텍스트를 읽을 수 없게 될 수 있습니다.
font-size-adjust 속성은 특정 측정항목 (일반적으로 x-height)을 기준으로 글꼴 크기를 정규화하여 현재 활성 상태인 글꼴과 관계없이 텍스트가 동일한 시각적 공간을 차지하도록 함으로써 이 문제를 해결합니다.
구현 단계
1. 원하는 글꼴의 가로세로 비율 확인
대체 글꼴을 정규화하려면 기본 글꼴의 '가로세로 값' (소문자와 글꼴 크기의 비율)이 필요합니다.
- 자동 검색 (권장):
from-font키워드를 사용하여 브라우저가 기본 웹 글꼴에서 비율을 추출하도록 합니다. - 수동 계산: 특정 값 (예: Verdana의 경우 0.545)을 알고 있는 경우 이를 직접 제공하여 더 정밀하게 제어할 수 있습니다.
2. 텍스트 컨테이너에 font-size-adjust 적용
요소 또는 상위 컨테이너에 속성을 적용합니다. 이렇게 하면 기본 글꼴이 로드되지 않거나 로드 중인 경우 대체 글꼴이 기본 글꼴의 시각적 크기에 맞게 조정됩니다.
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. (선택사항) 특정 측정항목 조정
x-height가 기본값이며 가장 일반적이지만 cap-height (전부 대문자로 표시된 헤더에 유용) 또는 ch-width (고정 폭 글꼴에 유용)과 같은 다른 측정항목으로 정규화할 수 있습니다.
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. 시각적 안정성 확인
font-size-adjust 값이 대체와 올바르게 일치하는지 확인합니다. 웹 글꼴을 일시적으로 차단하거나 브라우저의 DevTools에서 font-family 선언을 조정하고 텍스트 레이아웃이 안정적으로 유지되는지 확인하여 이를 테스트할 수 있습니다.
대체 전략
font-size-adjust를 지원하지 않는 브라우저에서는 글꼴이 기본 배율로 렌더링됩니다. 이로 인해 글꼴 교체 중에 레이아웃이 변경되거나 가독성이 변경될 수 있습니다.
font-size-adjust 없이 이 문제를 완화하려면 @font-face 설명자 size-adjust, ascent-override, descent-override를 사용하여 대체 글꼴을 수동으로 조정할 수 있지만, 이는 단일 font-size-adjust 값보다 계산하기가 더 복잡합니다.