如何将 Google 字体与 Next.js 一起使用?- icode9编程语言技巧


要将谷歌字体添加到 Next.js 应用程序,请创建自定义文档(页面文件夹中的 _document.tsx),然后从谷歌字体复制

图像.png

// 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 规则

图像.png

以上就是今天(2022年11月9日20:00:35)小编为大家整理的icode9【编程语言技巧】,希望对大家有所帮助。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/292863.html

(0)
上一篇 2022年11月9日
下一篇 2022年11月9日

相关推荐

发表回复

登录后才能评论