CSS font-size-adjust 속성이 오늘부터 Chrome에 적용됩니다.
Baseline Newly Available(새롭게 사용 가능한 기준)의 일부가 됩니다. 이 속성은
대체 글꼴이 로드될 때 레이아웃을 변경해야 하고
더 작은 글꼴 크기에서도 대체 글꼴의 가독성을 높일 수 있습니다. font-size-adjust
속성이
Interop 2024,
이는 인터넷과 상호 운용성을 개선하려는 노력에 있어
웹 플랫폼에서 사용할 수 있습니다.
문제
동일한 크기로 설정된 두 개의 글꼴을 모양과 크기에 따라 비교하는 경우 표시되는 텍스트가 매우 다른 공간을 차지할 수 있습니다. 다음 데모는 Verdana 및 Arial의 텍스트를 보여주는 예입니다. 둘 다 16픽셀로 설정되어 있습니다.
<ph type="x-smartling-placeholder">크기 차이는 가로세로 값 글꼴의 대문자와 비교한 소문자의 높이입니다. 는 글꼴마다 다릅니다.
가로세로 값이 다른 글꼴을 사용하면 두 가지 문제가 발생할 수 있습니다. 사용할 수 있습니다 먼저 글꼴이 차지하는 공간이 변경됩니다. 둘째, 선택한 대체 글꼴은 원래 글꼴보다 가독성이 특히 작은 글꼴 크기에서 지정됩니다. 이는 소문자와 대문자의 상대적 높이를 가독성을 높일 수 있습니다.
font-size-adjust의 이점
font-size-adjust 속성을 사용하면 대체 글꼴을 더 잘
첫 번째 글꼴과 일치합니다. 다음 예는
이번에는 두 번째 글꼴이 첫 번째 글꼴과 일치하도록 조정되었습니다.
font-size-adjust 사용.이 예에서는 단일 값, 즉 숫자를 사용하며, 이 숫자는
기본 글꼴 측정항목 ex-height입니다. 이것은 x 높이의 비율이며
높이와 글꼴 크기를 비교할 수 있습니다. 글꼴을 지정할 수도 있습니다.
측정항목입니다. 다음 예에서는
숫자와 함께 ch-width 키워드를 입력합니다.
font-size-adjust 사용가능한 모든 값을 보려면 다음을 확인하세요.
font-size-adjust에 관한 MDN 문서
대체 글꼴을 사용하여 사이트를 살펴보고
font-size-adjust로 조정하면 대체 글꼴을 사용하는 독자에게 도움이 될 수 있습니다.
더욱 개선된 환경이 제공됩니다. 특히 이제 어디에서나 사용할 수 있습니다.