시각적으로 안정적인 혼합 글꼴

인라인 코드 스니펫을 삽입하거나 다른 테마의 글꼴 모음을 전환하는 등 다양한 글꼴 모음을 혼합할 때 'x-height' (소문자 높이)의 차이로 인해 한 글꼴이 다른 글꼴보다 훨씬 작거나 크게 보일 수 있습니다. 이로 인해 가독성이 떨어지고 레이아웃이 변경될 수 있습니다.

font-size-adjust 속성을 사용하면 특정 글꼴 측정항목 (일반적으로 x-height)을 기반으로 글꼴 크기를 조정하여 텍스트의 시각적 크기를 정규화할 수 있습니다.

구현 단계

1. 필수: 웹 글꼴을 사용하는 컨테이너나 글꼴 모음이 혼합된 블록과 같이 글꼴 일관성이 중요한 요소에 font-size-adjust를 적용합니다.
2. 필수: 요소에 from-font 키워드를 사용하여 중첩된 요소의 글꼴 크기를 기본 글꼴의 비율에 자동으로 일치시킵니다.
3. 필수: font-size-adjust에 특정 숫자 가로세로 비율 재정의 값(예: font-size-adjust: 0.5)을 사용하여 기반으로 하는 글꼴 비율이 다른 테마에서 가져온 경우 비율을 독립적으로 정규화합니다.

예: x-높이 자동 정규화

from-font를 사용하는 것이 가장 강력한 방법입니다. 사용 가능한 첫 번째 글꼴에서 x-높이의 가로세로 비율을 추출하여 하위 요소의 글꼴에 적용합니다.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

예: 특정 x-높이 지정

조정할 글꼴이 크기의 기준이 되는 글꼴의 하위 요소가 아닌 경우 x 높이를 조정할 값을 지정합니다.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

대체 전략

필수: font-size-adjust를 지원하지 않는 브라우저에서는 글꼴이 기본 font-size 값으로 렌더링됩니다. 이를 완화하려면 @supports 블록을 사용하여 지원되지 않는 브라우저에 유효한 대체 전략을 제공해야 합니다.

• @supports not (font-size-adjust: from-font)를 사용하여 font-size-adjust 지원을 감지하고 대체 스타일 (예: 조정된 줄 높이 또는 글꼴 크기)을 제공합니다.
• 기본 글꼴과 x-높이가 비슷한 글꼴을 선택합니다.
• 대체 및 중첩 글꼴 모음에 특정 font-size 및 line-height 재정의를 적용합니다.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}