iconDirEasy
UI

字体配置

自定义字体及其使用方法

fonts.ts文件从Vercel Fonts导入默认的Geist字体,配置适当的子集和CSS变量名称,然后导出一个可以在应用中使用的className。这个CSS变量随后会被应用到共享的Tailwind配置中。

默认情况下,fonts.ts导出一个sans和一个mono字体,但你可以根据需要配置导出更多字体,例如heading、body、secondary等。你也可以通过简单地替换字体名称来完全替换字体,如下所示:

lib/fonts.ts
import { Acme } from 'next/font/google';
 
const sans = Acme({ subsets: ['latin'], variable: '--font-sans' });

你也可以加载本地字体。更多信息请参阅Next.js文档