웹 렌더링에서 사전 로드를 통해 글꼴 로딩 지연을 어떻게 크게 줄일 수 있습니까?

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

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

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

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

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

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

<link
  rel="preload"
  href="assets/fonts/xxx.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

숙달을 위한 추가 리소스

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

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

위 내용은 웹 렌더링에서 사전 로드를 통해 글꼴 로딩 지연을 어떻게 크게 줄일 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!