웹 렌더링에서 글꼴 로딩 지연을 효율적으로 완화

@font-face를 통해 사용자 정의 글꼴을 포함하는 것은 웹 디자인에서 일반적인 관행이지만, 깜박이는 효과가 발생할 수 있습니다. 텍스트는 처음에는 기본 시스템 글꼴로 렌더링된 다음 완료되면 사용자 정의 글꼴로 전환됩니다. 이러한 바람직하지 않은 지연은 글꼴 파일의 비동기 로드로 인해 발생합니다.

"사전 로드"를 사용한 선점형 글꼴 로드

이 지연을 최소화하기 위한 업계 표준 솔루션은 다음에서 지원하는 사전 로드 HTML 속성을 활용하는 것입니다. 최신 브라우저. 이 속성을 사용하면 브라우저가 페이지 콘텐츠를 렌더링하기 전에 글꼴 파일 로드의 우선순위를 지정할 수 있습니다.

사전 로드를 통합하면 지정된 글꼴 파일의 로드를 비동기적으로 시작하도록 브라우저에 지시하여 페이지에서 텍스트 렌더링을 요청하면 사용하세요. 그 결과, 인지할 수 있는 지연 없이 사용자 정의 글꼴이 적용되는 원활한 전환이 이루어졌습니다.

예를 들어 다음 코드 조각을 고려하세요.

숙달을 위한 추가 리소스

주제에 대한 추가 통찰력을 얻으려면 다음 리소스를 탐색하는 것이 좋습니다.

• [사용할 수 있나요: link-rel- 사전 로드](https://caniuse.com/#feat=link-rel-preload)
• [rel=preload에 대한 문서 - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch_and_preload)
• [웹 글꼴에 대한 사전 로드 힌트 - Bram Stein](https://bramstein.com/blog/ 2013/01/14/preload-hint-web-fonts/)