CSS font-size-adjust가 이제 Baseline에 있습니다.

Rachel Andrew

CSS font-size-adjust 속성이 오늘부터 Chrome에 적용됩니다. Baseline Newly Available(새롭게 사용 가능한 기준)의 일부가 됩니다. 이 속성은 대체 글꼴이 로드될 때 레이아웃을 변경해야 하고 더 작은 글꼴 크기에서도 대체 글꼴의 가독성을 높일 수 있습니다. font-size-adjust 속성이 Interop 2024, 이는 인터넷과 상호 운용성을 개선하려는 노력에 있어 웹 플랫폼에서 사용할 수 있습니다.

문제

동일한 크기로 설정된 두 개의 글꼴을 모양과 크기에 따라 비교하는 경우 표시되는 텍스트가 매우 다른 공간을 차지할 수 있습니다. 다음 데모는 Verdana 및 Arial의 텍스트를 보여주는 예입니다. 둘 다 16픽셀로 설정되어 있습니다.

크기 차이는 가로세로 값 글꼴의 대문자와 비교한 소문자의 높이입니다. 는 글꼴마다 다릅니다.

가로세로 값이 다른 글꼴을 사용하면 두 가지 문제가 발생할 수 있습니다. 사용할 수 있습니다 먼저 글꼴이 차지하는 공간이 변경됩니다. 둘째, 선택한 대체 글꼴은 원래 글꼴보다 가독성이 특히 작은 글꼴 크기에서 지정됩니다. 이는 소문자와 대문자의 상대적 높이를 가독성을 높일 수 있습니다.

font-size-adjust의 이점

font-size-adjust 속성을 사용하면 대체 글꼴을 더 잘 첫 번째 글꼴과 일치합니다. 다음 예는 이번에는 두 번째 글꼴이 첫 번째 글꼴과 일치하도록 조정되었습니다.

이 예에서는 단일 값, 즉 숫자를 사용하며, 이 숫자는 기본 글꼴 측정항목 ex-height입니다. 이것은 x 높이의 비율이며 높이와 글꼴 크기를 비교할 수 있습니다. 글꼴을 지정할 수도 있습니다. 측정항목입니다. 다음 예에서는 숫자와 함께 ch-width 키워드를 입력합니다.

가능한 모든 값을 보려면 다음을 확인하세요. font-size-adjust에 관한 MDN 문서

대체 글꼴을 사용하여 사이트를 살펴보고 font-size-adjust로 조정하면 대체 글꼴을 사용하는 독자에게 도움이 될 수 있습니다. 더욱 개선된 환경이 제공됩니다. 특히 이제 어디에서나 사용할 수 있습니다.