@font-face용 CSS 크기 조정

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

Adam Argyle

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

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

이 게시물에서는 size-adjust라는 새 CSS font-face 설명자를 살펴봅니다. 또한 더 원활한 사용자 환경, 일관된 디자인 시스템, 더 예측 가능한 페이지 레이아웃을 위해 글꼴 크기를 수정하고 정규화하는 몇 가지 방법을 보여줍니다. 중요한 사용 사례 중 하나는 누적 레이아웃 이동 (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 스니펫을 가져옵니다.

이 게시물 초반에는 시행착오를 통해 글꼴 크기 문제를 해결했습니다. 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을 원활하게 대체할 수 있도록 조정하는 방법이 계산됩니다. 다음은 계산기의 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: not 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: not 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: not supported.

Source

line-gap-override 설명자는 글꼴의 line-gap 측정항목을 정의합니다. 글꼴에서 권장하는 행 간격 또는 외부 리드입니다.

@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 기능은 웹 레이아웃의 텍스트 경계 상자를 맞춤설정하여 글꼴 전환 환경을 개선하고 사용자에게 레이아웃 이동을 방지하는 흥미로운 방법입니다. 자세한 내용은 다음 리소스를 참고하세요.

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