@font-face용 CSS 크기 조정

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

Adam Argyle
Adam Argyle

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

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

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

브라우저 지원

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

소스

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

  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이 부드럽게 전환되도록 로드된 맞춤 글꼴을 예상하여 조정됩니다.

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

브랜드 서체를 타겟으로 하는 것도 몰테의 계산기 작동 방식입니다. 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

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 89.
  • Safari: 지원되지 않음

소스

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

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

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

descent-override

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 89
  • Safari: 지원되지 않음

소스

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

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

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

line-gap-override

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 89.
  • Safari: 지원되지 않음

소스

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

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