// font.ts file
import { Quicksand, Syncopate } from 'next/font/google';
export const quickSandRegular = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-reg',
weight: '400',
display: 'swap',
});
export const quickSandSmBold = Quicksand({
subsets: ['latin'],
variable: '--font-quicksand-smbold',
weight: '600',
display: 'swap',
});
export const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg',
weight: '400',
display: 'swap',
});
export const syncopateBold = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-bold',
weight: '700',
display: 'swap',
});
//layout.tsx file
import {
quickSandRegular,
quickSandSmBold,
syncopateBold,
syncopateRegular,
} from '@/lib/fonts';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {return (
<html lang="en">
<body
className={`${[
syncopateRegular.variable,
syncopateBold.variable,
quickSandRegular.variable,
quickSandSmBold.variable,
]} `}
>
{children}
</body>
</html>
);
}
// global.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
& .header {
font-family: var(--font-syncopate-reg);
@apply center;
}
}
}
// page.tsx file
export default function CustomerList() {
return (<Card className="card">
<CardHeader>
<CardTitle className="header">RIMIX</CardTitle>
</CardHeader>
</Card>)
}
我尝试在 CSS 文件中使用 NextFont 的变量，但它无法更改字体系列。
因此，根据 NextJs 文档，我可以通过使用定义的变量名称在 css 文件中指定来更改文本的字体系列。
const syncopateRegular = Syncopate({
subsets: ['latin'],
variable: '--font-syncopate-reg', /** using this in global css file in var() */
weight: '400',
display: 'swap',
});
但我的文字字体仍然保持不变。
最初我以为问题是因为我错误地使用了 .className 而不是 .variable 后缀来插入根布局中的字体，但事实并非如此。
我设法解决了这个问题，仔细查看了文档，我意识到我需要一一添加 .variable classNames，而不是将它们全部放入数组中。
<body
className={`${syncopateRegular.variable} ${syncopateBold.variable} ${quickSandRegular.variable} ${quickSandSmBold.variable} `}
>
{children}
</body>