@font-face용 CSS 크기 조정

이제 웹 글꼴이 로드될 때 글꼴 크기를 조정하여 문서 글꼴 크기를 정규화하고 글꼴 간에 전환할 때 레이아웃 변경을 방지할 수 있습니다.

Adam Argyle

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

이 예에서는 Chrome DevTools CSS 그리드 레이아웃 디버그 도구를 사용하여 높이를 표시합니다.

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

  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를 넣으면 글꼴의 전역 글리프 조정이 설정됩니다. 이 타이밍을 적절하게 맞추면 시각적 변화가 최소화되고 원활한 전환이 가능합니다. 원활한 교체를 만들려면 Malte Ubl의 크기 조정 계산기를 직접 조정하거나 사용해 보세요.

Google 웹 글꼴을 선택하고 사전 조정된 @font-face 스니펫을 가져옵니다.

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

@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이 조정됩니다.

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

브랜드 서체를 타겟으로 설정하는 것도 말테의 계산기가 작동하는 방식입니다. Google Fonts를 선택하면 Arial을 원활하게 교체할 수 있도록 조정하는 방법이 계산됩니다. 다음은 계산기의 Roboto CSS 예시입니다. 여기서 Arial이 로드되고 이름이 'Roboto-fallback'으로 지정됩니다.

@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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

빨간색 헤드라인 (조정되지 않음)은 대문자 A와 O 위에 공백이 있는 반면 파란색 헤드라인은 대문자 높이가 전체 경계 상자에 꼭 맞도록 조정되었습니다.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

빨간색 헤드라인 (조정되지 않음)은 D 및 O 기준선 아래에 공백이 있는 반면 파란색 헤드라인은 글자가 기준선에 꼭 맞게 조정되었습니다.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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 기능은 웹 레이아웃의 텍스트 경계 상자를 맞춤설정하여 글꼴 전환 환경을 개선하고 사용자의 레이아웃 변경을 방지하는 흥미로운 방법입니다. 자세히 알아보려면 다음 리소스를 확인하세요.