@font-face용 CSS 크기 조정

이제 웹 글꼴이 로드될 때 글꼴 크기를 조정하여 문서 글꼴 크기를 표준화하고 글꼴 간에 전환할 때 레이아웃이 전환되지 않도록 할 수 있습니다.

다음 데모를 살펴보세요. 여기서 font-size는 일관된 64px이고 각 헤더 간의 유일한 차이는 font-family입니다. 왼쪽의 예시는 조정되지 않았으며 최종 크기가 일관되지 않습니다. 오른쪽 예에서는 size-adjust를 사용하여 64px가 일관된 최종 크기가 되도록 합니다.

이 게시물에서는 size-adjust라는 새 CSS font-face descriptor를 살펴봅니다. 또한 더 원활한 사용자 환경, 일관된 디자인 시스템, 더 예측 가능한 페이지 레이아웃을 위해 글꼴 크기를 수정하고 표준화하는 몇 가지 방법을 보여줍니다. 중요한 사용 사례 중 하나는 누적 레이아웃 전환 (CLS)을 방지하기 위해 웹 글꼴 렌더링을 최적화하는 것입니다.

다음은 문제 공간의 대화형 데모입니다. 드롭다운을 사용하여 서체를 변경해 보고 다음을 확인합니다.

1. 결과의 높이 차이입니다.
2. 시각적으로 불편한 콘텐츠 전환
3. 대화형 타겟 영역 이동 (드롭다운이 여기저기 움직임).

size-adjust로 글꼴 크기 조절하기

문법 소개:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Adjusted Typeface라는 맞춤 서체를 만듭니다.
2. size-adjust를 사용하여 각 글꼴을 기본 크기의 150% 로 확대합니다.
3. 가져온 단일 서체에만 영향을 미칩니다.

위의 맞춤 서체를 다음과 같이 사용합니다.

h1 {
  font-family: "Adjusted Typeface";
}

원활한 글꼴 전환으로 CLS 완화

다음 GIF에서 왼쪽의 예시와 글꼴을 변경할 때 어떻게 변화하는지 확인하세요. 이는 제목 요소가 하나만 있는 작은 예시일 뿐이며 문제가 매우 눈에 띕니다.

글꼴 렌더링을 개선하는 좋은 방법은 글꼴 전환입니다. 빠르게 로드되는 시스템 글꼴을 렌더링하여 먼저 콘텐츠를 표시한 다음 웹 글꼴 로드가 완료되면 이를 웹 글꼴로 전환합니다. 이렇게 하면 두 가지 장점을 모두 누릴 수 있습니다. 콘텐츠가 최대한 빨리 표시되고 사용자의 콘텐츠 탐색 시간을 희생하지 않고도 멋진 스타일의 페이지를 얻을 수 있습니다. 그러나 웹 글꼴이 로드될 때 상자 높이 크기가 약간 다르게 표시되므로 전체 페이지가 이동하는 경우가 있습니다.

@font-face 규칙에 size-adjust를 배치하면 글꼴에 전역 글리프 조정을 설정합니다. 타이밍을 잘 맞추면 시각적 변화가 최소화되고 원활하게 전환됩니다. 원활한 전환을 만들려면 직접 조정하거나 말테 우블의 크기 조정 계산기를 사용해 보세요.

이 게시물의 시작 부분에서 글꼴 크기 문제를 해결하기 위해 시행착오를 거쳤습니다. size-adjust는 Cookie와 Arial의 동일한 헤더가 Press Start 2P와 동일한 64px를 자연스럽게 렌더링할 때까지 소스 코드에서 조정되었습니다. 두 글꼴을 타겟 글꼴 크기에 맞게 정렬했습니다.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

글꼴 보정

작성자는 글꼴 크기를 정규화하기 위한 보정 타겟을 결정합니다. Times, Arial 또는 시스템 글꼴에서 표준화한 다음 맞춤 글꼴을 조정할 수 있습니다. 또는 다운로드한 글꼴과 일치하도록 로컬 글꼴을 조정할 수도 있습니다.

size-adjust 보정 전략:

1. 원격 타겟:
   로컬 글꼴을 다운로드한 글꼴에 맞게 조정합니다.
2. 로컬 타겟:
   다운로드한 글꼴을 로컬 타겟 글꼴에 맞게 조정합니다.

예 1: 원격 타겟

다음 스니펫은 로컬에서 사용 가능한 글꼴을 원격 src 맞춤 글꼴과 크기를 일치하도록 조정합니다. 원격 맞춤 글꼴은 보정 대상(예: 브랜드 글꼴)입니다.

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

이 예에서는 로컬 글꼴 Arial이 부드럽게 전환되도록 로드된 맞춤 글꼴을 예상하여 조정됩니다.

이 전략은 크기 조절과 서체에 디자이너와 개발자에게 동일한 글꼴을 제공한다는 이점이 있습니다. 브랜드가 보정 타겟입니다. 이는 디자인 시스템에 좋은 소식입니다.

브랜드 서체를 타겟으로 하는 것도 Malte의 계산기 작동 방식입니다. Google 글꼴을 선택하면 Arial을 조정하여 원활하게 전환하는 방법이 계산됩니다. 다음은 Arial이 로드되고 'Roboto-fallback'로 이름이 지정된 계산기의 Roboto CSS 예입니다.

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

완전한 교차 플랫폼 조정을 만들려면 브랜드 글꼴을 예상하여 조정된 로컬 대체 글꼴 2개를 제공하는 다음 예를 참고하세요.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

예 2: 지역 타겟

다음 스니펫은 브랜드 맞춤 글꼴을 Arial과 일치하도록 조정합니다.

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

이 전략의 장점은 조정 없이 렌더링한 후 수신되는 글꼴을 일치하도록 조정한다는 점입니다.

ascent-override, descent-override, line-gap-override를 사용한 미세 조정

글꼴의 일반 크기 조정이 디자인이나 로드 전략에 충분하지 않은 경우 다음은 size-adjust와 함께 작동하는 세부 조정 옵션입니다. ascent-override, descent-override, line-gap-override 속성은 현재 Chromium 87 이상 및 Firefox 89 이상에서 구현됩니다.

ascent-override

ascent-override 설명어는 글꼴의 기준선 위의 높이를 정의합니다.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

빨간색 광고 제목 (조정되지 않음)에는 대문자 A와 O 위에 여백이 있는 반면, 파란색 광고 제목은 대문자 높이가 전체 경계 상자에 잘 맞도록 조정되었습니다.

descent-override

descent-override 설명자는 글꼴 기준선 아래의 높이를 정의합니다.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

빨간색 제목 (조정되지 않음)에는 D와 O 기준선 아래에 여백이 있는 반면, 파란색 제목은 글자가 기준선에 잘 맞도록 조정되었습니다.

line-gap-override

line-gap-override 설명자는 글꼴의 선 간격 측정항목을 정의합니다. 글꼴에 권장되는 줄 간격 또는 외부 여백입니다.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

빨간색 광고 제목 (조정되지 않음)에는 line-gap-override가 없으며 기본적으로 0%에 있습니다. 반면 파란색 광고 제목은 50% 상향 조정되어 문자 위에 및 아래에 공간이 생겼습니다.

요약 정리

이러한 각 재정의는 웹의 안전한 텍스트 경계 상자에서 초과 부분을 자르는 추가적인 방법을 제공합니다. 정확한 프레젠테이션을 위해 텍스트 상자를 조정할 수 있습니다.

결론

@font-face size-adjust CSS 기능은 웹 레이아웃의 텍스트 경계 상자를 맞춤설정하여 글꼴 전환 환경을 개선하고 사용자의 레이아웃 전환을 방지하는 흥미로운 방법입니다. 자세한 내용은 다음 리소스를 확인하세요.

• CSS 글꼴 수준 5 사양
• MDN의 크기 조정
• 원활한 전환 @font-face 생성기
• web.dev의 누적 레이아웃 변경 (CLS)
• 글꼴 로드 영향을 줄이는 새로운 방법: CSS 글꼴 설명자

사진: 크리스티안 스트랜드(Unsplash 제공)