Next.js - 글꼴을 최적화하는 방법
1876 단어 webdevjavascriptnextjsbeginners
Next.js 글꼴 최적화
타사 글꼴을 사용할 때 최적화되었는지 확인해야 합니다. Next.js 10.2 이전에는 수동으로 최적화해야 했습니다. 예를 들면 다음과 같습니다.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Squada+One:wght@400&display=swap"
rel="stylesheet"
/>
10.2 이후 Next.js는 이제 다양한 글꼴 최적화로 Google 글꼴 및 Typekit을 최적화할 수 있습니다. 이제 _document.js 내에서 글꼴을 제공할 수 있습니다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
원하는 표시 옵션을 쿼리 매개변수로 제공할 수도 있습니다.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Squada+One:wght@400&display=swap"
rel="stylesheet"
/>
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
block : 짧은 기간 동안의 텍스트 블록(보이지 않음)
교체: 차단 기간이 없으며(따라서 보이지 않는 텍스트 없음) 사용자 정의 글꼴이 로드될 때까지 대체 글꼴로 텍스트가 즉시 표시됩니다
fallback: 블록과 스왑 사이의 어딘가에 있습니다. 짧은 시간(100ms) 동안 텍스트가 보이지 않습니다. 그런 다음 사용자 지정 글꼴이 다운로드되지 않은 경우 텍스트가 대체 글꼴로 표시되고(약 3초 동안) 사용자 지정 글꼴이 로드된 후 교체됩니다.
선택 사항: 이는 폴백처럼 동작하며, 사용자의 연결 속도에 따라 브라우저만 사용자 지정 글꼴을 전혀 사용하지 않기로 결정할 수 있습니다(느린 3G 이하인 경우 사용자 지정 글꼴을 다운로드하고 그런 다음 교체하는 것이 너무 늦고 매우 성가시다)
auto: 이것은 기본적으로 폴백과 동일하게 끝납니다.
Reference
이 문제에 관하여(Next.js - 글꼴을 최적화하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/perkinsjr/nextjs-how-to-optimize-fonts-4i7e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
