글꼴 대체 및 CLS
…핵심 웹 바이탈의 컨텍스트에서
사용자 지정 글꼴(모든 브라우저에서 기본적으로 알 수 없는 글꼴)을 로드하면 로드 시퀀스에서 일부 지연이 발생하고 CLS(누적 레이아웃 이동) 문제가 발생할 수 있습니다. 이는 브라우저에서 글꼴이 캐시될 때까지 사이트에서 첫 번째 페이지 로드에 대해 적용됩니다.
사용자 지정 글꼴을 미리 로드하거나 푸시할 수 있지만 항상 기본 글꼴로 본문이 렌더링됩니다. 이는 특히 느린 장치나 느린 연결에서 적용됩니다. 글꼴이 로드될 때까지 전체 본문을 숨길 수 있지만 FCP(첫 번째 콘텐츠풀 페인트) 및 LCP(가장 큰 콘텐츠풀 페인트) 점수는 높은 페널티를 받습니다.
font-display: optional과(와) 같은 CSS 트릭을 사용할 수도 있지만 느린 연결에서 글꼴이 전혀 로드되지 않을 수 있습니다. 브라우저에는 특정(짧은) 지연 후에 이를 무시하는 명령이 있습니다.
이 마지막 해결 방법으로는 글꼴을 변경하여 컨텐츠의 크기가 변경될 수 있고 레이아웃이 "이동"할 수 있으므로, CLS 점수에 영향을 줄 수 있습니다.
이러한 두 가지 문제(글꼴 로드 지연 및 CLS)를 방지하는 데 사용할 수 있는 다른 메커니즘이 있습니다. 글꼴 폴백을 사용하십시오.
글꼴 대체 의 아이디어는 페이지의 콘텐츠에 적용할 때 콘텐츠가 글꼴 대체 및 사용자 정의 글꼴과 동일한 "공간"을 차지하도록 브라우저 기본 글꼴의 크기를 조정하는 것입니다. 이렇게 하면 레이아웃 전환 없이 서로 교체할 수 있습니다. 사용자 지정 글꼴과 충분히 "유사한" 기본 글꼴을 사용하는 경우, 처음 페이지를 로드하는 몇 밀리초가 사용자 지정 글꼴과 함께 제공하려는 경험과 거의 비슷하게 보입니다. 그런 다음 사용자 지정 글꼴 로드를 지연하거나 로드 시퀀스에서 적어도 차단을 해제하도록 할 수 있습니다.
font-fallback 확장
글꼴 대체 요소를 계산하는 데 도움이 되도록 chrome 확장 프로그램을 빌드했습니다.
페이지에서 확장을 열면 해당 페이지에서 사용 중인 글꼴 면을 분석합니다. 글꼴 면은 글꼴 패밀리와 글꼴 굵기의 조합입니다. 이제 이러한 각 글꼴에 대해 기본 브라우저 글꼴을 선택하고 글꼴 대체 계산을 실행할 수 있습니다. 각 글꼴에 대해 확장은 콘텐츠가 두 글꼴과 동일한 너비를 갖도록 필요한 기본 브라우저 글꼴의 size-adjustment을(를) 계산합니다.
높이는 line-height에 의해 제어되어야 하므로 폭에서만 계산이 수행됩니다. 사이트에서 line-height을(를) 설정하여 글꼴이 텍스트 높이를 결정하지 않도록 해야 합니다. 이는 단락, 제목, 목록…
참고: 글꼴 키트를 사용하면 사용되지 않는(또는 현재 페이지보다 사이트의 다른 곳에서 사용되는) 많은 글꼴 면을 로드하는 경향이 있습니다. 확장 프로그램은 총 몇 개가 로드되는지도 보여 줍니다. 또한 몇 가지 최적화를 할 수있는 경우 좋은 지표입니다 : 글꼴 키트가 제공하는 글꼴을 줄여 글꼴 키트를 최적화하면 전송할 바이트를 많이 저장할 수 있습니다!
계산 작업이 완료되면 계산된 CSS를 복사하여 기본 CSS에 붙여넣을 수 있습니다.
생성된 글꼴 패밀리는 CSS font-family에서 사용자 정의 글꼴 뒤에 추가해야 합니다. 처음에는 브라우저가 사용자 정의 글꼴을 찾지 못하고 나중에 사용자 정의 글꼴이 로드될 때까지 대체 글꼴을 사용합니다. 동일한 공간을 사용하므로 스왑은 CLS를 생성하지 않습니다.
글꼴 조정 값을 미세 조정하려면 시뮬레이션 패널을 사용할 수도 있습니다.
상자를 선택하면 사용자 정의 글꼴이 페이지에서 직접 계산된 대체 글꼴로 바뀝니다. 텍스트 입력을 통해 size-adjust 값을 변경하고 결과를 즉시 시각화할 수 있습니다(값을 변경할 때마다 확인란을 전환해야 함).
Edge 사례
확장은 기존 콘텐츠 및 CSS 규칙을 사용하여 기존 사이트를 기반으로 계산을 수행합니다. 다른 컨텍스트에서는 size-adjust이(가) 완벽하게 맞지 않을 수 있으며 글꼴 교환으로 CLS가 생성될 수 있습니다.
- 콘텐츠 종속성: 텍스트
iiiii의 너비가 같은 문자 수에 대해mmmmm보다 작습니다. 텍스트의m수가 너비에 더 큰 영향을 미칩니다. 그러나 여러 페이지에서 확장을 실행하고 평균size-adjust을(를) 취하면 평균 텍스트와 일치하는size-adjust을(를) 찾을 수 있습니다. - 작은 컨테이너: 텍스트가 제한된 너비와 높이의 작은 컨테이너(특히 모바일에서 참)에 있는 경우 텍스트에 허용되는 공간이 제한되고 대체 항목의 계산이 더 정확해야 할 수 있습니다(즉, 이 정확한 텍스트에서 생성되어야 함).
추가 기술 세부 정보 및 기타 도구를 확장 저장소에서 직접 찾을 수 있습니다. https://github.com/adobe/helix-font-fallback-extension