@font-face용 CSS 크기 조정

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

Adam Argyle

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

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

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

브라우저 지원

  • 92
  • 92
  • 92
  • 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에서 왼쪽의 예와 글꼴이 변경될 때 변경되는 방식을 확인하세요. 이는 하나의 광고 제목 요소를 포함하는 작은 예일 뿐이며 문제가 아주 눈에 띕니다.

왼쪽 예에는 레이아웃 변경이 있지만 오른쪽에는 그렇지 않습니다.

글꼴 렌더링을 개선하기 위한 좋은 기술은 글꼴 전환입니다. 빠른 로드 시스템 글꼴을 렌더링하여 콘텐츠를 먼저 표시한 다음 웹 글꼴 로드가 완료되면 웹 글꼴로 바꿉니다. 이렇게 하면 두 가지의 장점을 모두 누릴 수 있습니다. 즉, 콘텐츠가 가능한 한 빨리 표시되고 사용자가 콘텐츠를 보는 데 시간을 허비하지 않으면서도 세련된 스타일의 페이지를 얻을 수 있습니다. 그러나 문제는 웹 글꼴이 로드될 때 상자 높이가 약간 다른 크기로 표시되기 때문에 전체 페이지가 바뀌는 것입니다.

콘텐츠가 많을수록 글꼴 전환 시 레이아웃 변경 가능성도 커집니다.

size-adjust를 @font-face 규칙에 배치하면 글꼴의 전역 글리프 조정이 설정됩니다. 이 권한을 타이밍에 맞추면 시각적 변화를 최소화하고 원활하게 전환할 수 있습니다. 원활한 바꾸기를 만들려면 손으로 조정하거나 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";
}

이 예에서 로컬 글꼴 제공은 원활한 전환을 위해 로드된 맞춤 글꼴을 예상하여 조정됩니다.

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

타겟으로 브랜드 서체를 사용하는 것도 몰테의 계산기가 작동하는 방식입니다. Google 글꼴을 선택하면 Google 글꼴이 그 글꼴과 매끄럽게 바꾸기 위해 제공을 조정하는 방법을 계산합니다. 다음은 계산기의 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

브라우저 지원

  • 87
  • 87
  • 89
  • x

소스

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

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

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

descent-override

브라우저 지원

  • 87
  • 87
  • 89
  • x

소스

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

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

빨간색 헤드라인 (조정되지 않음)은 D와 O 기준 아래에 공간이 있고, 파란색 헤드라인은 조정된 글자가 기준선에 위치하도록 조정되었습니다.

line-gap-override

브라우저 지원

  • 87
  • 87
  • 89
  • x

소스

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

사진: Kristian Strand, Unsplash