글꼴 로딩 영향을 줄이는 새로운 방법: CSS 글꼴 설명자

글꼴 로딩은 오랫동안 웹 성능의 버그였으며 여기에는 실제로 좋은 선택이 없습니다. 웹 글꼴을 사용하려는 경우 기본적으로 글꼴이 다운로드될 때까지 텍스트가 숨겨지는 Flash of Invisible Text(FOIT라고도 함) 또는 초기에 폴백 시스템 글꼴을 사용한 다음 업그레이드하는 FOUT(Flash of Unstyled Text)을 선택합니다. 웹 글꼴이 다운로드될 때. 솔직히 말해서 어느 쪽도 실제로 만족스럽지 않기 때문에 어느 쪽 옵션도 실제로 "승리"하지 못했습니다.

이를 해결하기 위해 font-display 를 사용하지 않았습니까?

@font-face 에 대한 font-display 속성은 웹 개발자에게 선택권을 주었지만 이전에는 브라우저에서 (과거에는 IE와 Edge가 FOUT을 선호했지만 다른 브라우저는 FOIT를 선호함) 결정했습니다. 그러나 그 이상은 문제를 실제로 해결하지 못했습니다.

처음 나왔을 때 많은 사이트가 font-display: swap 으로 이동했고 Google Fonts는 2019년에도 이를 기본값으로 만들었습니다. 여기서 생각은 가능한 한 빨리 텍스트를 표시하는 것이 성능에 더 낫다는 생각이었습니다. 대체 글꼴에 있고 마침내 다운로드할 때 글꼴을 교체합니다.

저도 그때는 지지했는데 웹폰트 다운로드와 폰트 차이로 글자가 늘어나거나 줄어들때 생기는 '수분효과'에 점점 답답해집니다. 대부분의 출판사와 마찬가지로 Smashing Magazine은 웹 글꼴을 사용하며 아래 스크린샷은 초기 렌더링(대체 글꼴 사용)과 최종 렌더링(웹 글꼴 사용) 간의 차이를 보여줍니다.

이제 나란히 놓으면 웹 글꼴이 훨씬 더 멋지고 Smashing Magazine 브랜드와 잘 어울립니다. 그러나 우리는 또한 두 글꼴 의 텍스트 레이아웃에 상당한 차이 가 있음을 알 수 있습니다. 글꼴 크기가 매우 다르기 때문에 화면 내용이 이동합니다. Core Web Vitals 및 누적 레이아웃 전환이 사용자에게 해로운 것으로 인식되는 이 시대에 font-display: swap 은 그 때문에 좋지 않은 선택입니다.

나는 텍스트 이동이 상당히 거슬리고 성가시게 느껴지기 때문에 내가 돌보는 사이트에서 font-display: block 으로 되돌아갔습니다. block 이 시프트를 멈추지 않는 것은 사실이지만(글꼴은 여전히 ​​보이지 않는 텍스트로 렌더링됨) 최소한 사용자에게 덜 눈에 띄게 만듭니다. 또한 하위 집합 글꼴을 자체 호스팅 하여 가능한 작게 만든 글꼴을 미리 로드하여 글꼴 로드를 최적화했습니다. 따라서 방문자는 종종 짧은 기간 동안만 대체 글꼴을 보게 되었습니다. 나에게 swap 의 "블록 기간"은 너무 짧았고 솔직히 초기 렌더를 올바르게 하기 위해 조금 더 기다리는 것을 선호합니다.

font-display: optional FOIT 및 FOUT을 해결할 수 있음 — ​​비용 부담

다른 옵션은 font-display: optional 을 사용하는 것입니다. 이 옵션은 기본적으로 웹 글꼴을 선택 사항으로 만들거나, 페이지에 필요할 때 글꼴이 없으면 브라우저에서 절대 바꾸지 않아도 됩니다. 이 옵션을 사용하면 기본적으로 이미 다운로드된 글꼴만 사용하여 FOIT와 FOUT을 모두 방지합니다 .

웹 글꼴을 사용할 수 없는 경우 대체 글꼴로 대체되지만 다음 페이지 탐색(또는 이 페이지를 다시 로드)에서는 글꼴을 사용합니다. 그러나 웹 글꼴이 사이트에서 그다지 중요하지 않은 경우 완전히 제거하는 것이 좋습니다. 웹 성능에 훨씬 더 좋습니다!

첫인상이 중요하고 웹 글꼴 없이 초기 로드를 갖는 것은 조금 너무 많은 것 같습니다. 나는 또한 생각합니다. 그런데 이것을 뒷받침할 증거가 전혀 없습니다! — 사람들에게 아마도 무의식적으로 웹사이트에 대해 뭔가 "오프"되어 있고 사람들이 웹사이트를 사용하는 방식에 영향을 미칠 수 있다는 인상을 줄 것입니다.

따라서 웹 글꼴을 전혀 사용하지 않거나 시스템 글꼴을 사용하는 옵션을 포함하여 모든 글꼴 옵션에는 단점이 있습니다.

대체 글꼴을 글꼴과 더 가깝게 만들기

웹 글꼴 로딩의 성배 는 폴백 글꼴을 실제 웹 글꼴에 더 가깝게 만들어 눈에 띄는 변화를 최대한 줄여 swap 을 사용하는 것이 덜 영향을 미치는 것입니다. 변화를 완전히 피할 수는 없지만 위의 스크린샷보다 더 잘할 수 있습니다. Monica Dinculescu의 Font Style Matcher 앱은 글꼴 로딩 기사에서 자주 인용되며 여기에서 가능한 것을 환상적인 엿볼 수 있습니다. 동일한 텍스트를 두 개의 다른 글꼴로 오버레이하여 얼마나 다른지 확인하고 글꼴 설정을 조정하여 더 가깝게 정렬할 수 있습니다.

불행히도 글꼴 스타일 일치의 문제는 이러한 CSS 스타일을 대체 글꼴 에만 적용할 수 없다는 것입니다. 따라서 웹에서 이러한 스타일 차이를 적용(또는 되돌리기)하려면 JavaScript와 FontFace.load API를 사용해야 합니다. 글꼴 로드 .

코드의 양은 크지 않지만 여전히 해야 하는 것보다 약간 더 많은 노력이 필요한 것처럼 느껴집니다. 2019년 이 환상적인 강연에서 Zach Leatherman이 설명한 것처럼 이를 위해 JavaScript API를 사용하는 것에는 다른 장점과 가능성이 있지만 — 리플로우를 줄이고 data-server 모드를 처리할 수 있으며 그럼에도 불구하고 prefers-reduced-motion 합니다(참고 그 이후로 둘 다 CSS에 노출되었습니다).

또한 다양한 대체 스타일의 차이점은 말할 것도 없고 이미 가지고 있는 캐시된 글꼴을 처리하는 것이 더 까다롭습니다. 여기 Smashing Magazine에서 다양한 사용자와 운영 체제가 설치한 시스템 글꼴을 최대한 활용하기 위해 여러 가지 대안을 시도합니다.

 font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;

어떤 글꼴이 사용되는지 알거나 각각에 대해 별도의 조정을 수행하고 올바르게 적용되었는지 확인하는 것은 매우 복잡해질 수 있습니다.

더 나은 솔루션이 오고 있습니다

그래서, 그것은 오늘 현재 상황에 대한 간단한 캐치 업입니다. 그러나 수평선에 약간의 연기가 나타나기 시작합니다.

글꼴에 대한 CSS "크기 조정" 설명자: 글리프(백분율)에 대한 축척 비율을 통해 대체 글꼴과 기본 웹 글꼴을 일치시켜 레이아웃 이동을 줄입니다.

데모는 @cramforce의 https://t.co/mdRW2BMg6A를 참조하십시오(Chrome Canary/FF Nightly with flags) pic.twitter.com/hEg1HfUJlT

— Addy Osmani(@addyosmani) 2021년 5월 22일

앞서 언급했듯이 폴백 스타일 차이를 적용할 때의 주요 문제는 추가 및 제거에 있었습니다. 이러한 차이점은 대체 글꼴에만 해당한다고 브라우저에 알릴 수 있다면 어떨까요?

이것이 바로 CSS 글꼴 모듈 레벨 5의 일부로 제안되고 있는 새로운 글꼴 설명자 세트가 하는 일입니다. 이는 개별 글꼴이 정의된 @font-face 선언에 적용됩니다.

Simon Hearne은 ascent-override , descent-override , line-gap-override 및 advance-override (삭제된 이후)의 4가지 새로운 설명자를 포함하는 글꼴 설명자 사양에 대해 제안된 업데이트에 대해 작성했습니다. 사용자 정의 및 대체 글꼴을 로드하기 위해 Simon이 만든 F-mods 플레이그라운드로 플레이한 다음 오버라이드를 사용하여 완벽한 일치를 얻을 수 있습니다.

Simon이 쓴 것처럼 이 네 가지 설명자의 조합을 통해 웹 글꼴과 일치하도록 대체 글꼴의 레이아웃을 재정의할 수 있었지만 실제로는 세로 간격과 위치만 수정했습니다. 따라서 문자 및 문자 간격에 대해 추가 CSS를 제공해야 합니다.

그러나 상황은 다시금 변하고 있는 것 같습니다. 가장 최근에, advance-override 는 글리프(백분율)에 대한 배율 인수를 통해 대체 글꼴과 기본 웹 글꼴을 일치시켜 레이아웃 이동을 줄일 수 있게 해주는 다가오는 size-adjust 설명자를 위해 삭제되었습니다.

어떻게 작동합니까? 다음 CSS가 있다고 가정해 보겠습니다.

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } h1 { font-family: Lato, Arial, sans-serif; }

그런 다음 Arial 폴백 글꼴에 대해 @font-face 를 만들고 여기에 조정자 설명자를 적용합니다. 그러면 다음 CSS 스니펫을 얻을 수 있습니다.

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } @font-face { font-family: "Lato-fallback"; size-adjust: 97.38%; ascent-override: 99%; src: local("Arial"); } h1 { font-family: Lato, Lato-fallback, sans-serif; }

이것은 Lato-fallback 이 처음에 사용될 때(Arial은 local 글꼴이고 추가 다운로드 없이 바로 사용할 수 있기 때문에) size-adjust 및 ascent-override 설정을 통해 Lato 글꼴에 더 가깝게 만들 수 있습니다. 작성해야 하는 추가 @font-face 선언이지만 확실히 이전에 건너뛰어야 했던 작업보다 훨씬 쉽습니다!

전반적으로 이 사양에는 size-adjust , ascent-override , descent-override 및 line-gap-override 의 네 가지 주요 @font-face 설명자가 포함되어 있으며 아래 첨자, 위 첨자 및 기타 사용 사례에 대해 여전히 고려 중인 몇 가지가 있습니다. .

Malte Ubl은 두 개의 글꼴과 이러한 새로운 설정을 지원하는 브라우저에서 이러한 설정을 자동으로 계산하는 매우 유용한 도구를 만들었습니다. Malte가 지적했듯이 컴퓨터는 그런 종류의 것이 좋습니다! 이상적으로는 일반 글꼴에 대한 이러한 설정을 웹 개발자에게 노출할 수도 있습니다. 예를 들어 Google 글꼴과 같은 글꼴 모음에서 이러한 힌트를 제공할 수 있습니까? 그것은 확실히 채택을 늘리는 데 도움이 될 것입니다.

이제 운영 체제 마다 글꼴 설정이 약간 다를 수 있으며 이를 정확히 올바르게 설정하는 것은 기본적으로 불가능한 작업이지만 그것이 목표는 아닙니다. 목표는 간격을 font-display: swap 을 사용하는 것입니다. 스왑은 더 이상 불편한 경험이 아니지만 optional 이나 웹 글꼴이 없는 극단으로 갈 필요가 없습니다.

언제부터 사용할 수 있습니까?

키 size-adjust 설명자는 아직 안정적인 브라우저에서 사용할 수 없지만 이러한 설정 중 3개는 버전 87 이후 Chrome에 이미 제공되었습니다 . 그러나 Chrome Canary에는 깃발 뒤에 있는 Firefox와 마찬가지로 이 기능이 있으므로 이것은 추상적이고 먼 개념이 아니라 곧 착륙할 수 있는 것입니다.

현재 사양에는 아직 실시간으로 준비되지 않았다는 모든 종류의 면책 조항과 경고가 있지만, 확실히 거기에 도달하는 것처럼 느껴집니다. 항상 그렇듯이, 우리, 디자이너와 개발자 사이에는 균형이 있고, 그것을 테스트하고 피드백을 제공하고, 그것을 사용하지 않는 것이 좋습니다. 그래서 너무 많은 사람들이 결국 초기 초안을 사용하기 때문에 구현이 중단되지 않습니다.

Chrome은 7월 20일 출시 예정인 Chrome 92에서 size-adjust 을 사용할 수 있도록 할 것이라고 밝혔습니다.

그래서 아직 준비가 덜 된 상태지만 곧 나올 것 같습니다. 그 동안 Chrome Canary에서 데모를 플레이하고 글꼴 로드 문제와 이로 인한 CLS 영향을 해결하는 데 조금 더 다가갈 수 있는지 확인하세요.