如何将 Google 字体与 Next.js 一起使用?- icode9编程语言技巧
作者:互联网
要将谷歌字体添加到 Next.js 应用程序,请创建自定义文档(页面文件夹中的 _document.tsx),然后从谷歌字体复制
// pages/_document.tsx
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,
Main,
NextScript
} from 'next/document'
class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet"/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
)
}
}
export default MyDocument
最后,应用这个 CSS 规则
以上就是今天(2022年11月9日20:00:35)小编为大家整理的icode9【编程语言技巧】,希望对大家有所帮助。