게시일: 2024년 7월 23일
CSS font-size-adjust 속성이 오늘 Chrome에 도입되어 새로 제공되는 기준의 일부가 됩니다. 이 속성을 사용하면 대체 글꼴이 로드될 때 레이아웃이 전환되는 것을 방지하고 작은 글꼴 크기에서 대체 글꼴의 가독성을 보장할 수 있습니다. font-size-adjust 속성은 Interop 2024의 일부이므로 웹 플랫폼의 상호 운용성을 개선하기 위한 노력의 또 다른 성과입니다.
문제
동일한 크기로 설정된 두 글꼴을 비교할 때 글꼴의 모양과 크기에 따라 표시되는 텍스트가 차지하는 공간이 매우 다를 수 있습니다. 예를 들어 다음 데모는 모두 16픽셀로 설정된 Verdana 및 Arial 텍스트를 보여줍니다.
크기 차이는 글꼴에서 대문자와 비교할 때 소문자의 높이인 가로세로 비율 값이 글꼴마다 다르다는 사실에 기인합니다.
이로 인해 가로세로 비율 값이 다른 글꼴이 대체 글꼴로 사용될 때 두 가지 문제가 발생할 수 있습니다. 먼저 글꼴이 차지하는 공간의 양이 달라집니다. 둘째, 대체 글꼴은 특히 작은 글꼴 크기에서 처음 지정된 글꼴보다 읽기 어려울 수 있습니다. 이는 소문자와 대문자의 상대적 높이가 가독성의 주요 요소이기 때문입니다.
font-size-adjust의 이점
font-size-adjust 속성을 사용하면 대체 글꼴을 첫 번째 글꼴과 더 잘 일치하도록 조정할 수 있습니다. 다음 예에서는 이전에 표시된 두 가지 글꼴을 보여줍니다. 이번에는 두 번째 글꼴이 첫 번째 글꼴과 일치하도록 조정되었습니다.
font-size-adjust 사용이 예에서는 기본 글꼴 측정항목 ex-height을 사용하여 글꼴을 조정하는 단일 값(숫자)을 사용합니다. 글꼴의 소문자 x 높이인 x-height와 글꼴 크기의 비율입니다. 사용되는 글꼴 측정항목을 지정할 수도 있습니다. 다음 예에서는 숫자 외에도 ch-width 키워드를 사용하여 글꼴을 정규화했습니다.
font-size-adjust 사용가능한 모든 값을 보려면 font-size-adjust의 MDN 문서를 참고하세요.
대체 글꼴을 사용하는 사이트를 살펴보고 font-size-adjust를 약간만 조정하면 대체 글꼴을 사용하는 독자의 환경을 개선할 수 있는지 확인해 보세요. 특히 이제 어디서나 사용할 수 있습니다.