设计系统包包含一个预配置的字体文件,该文件已连接到所有应用程序。这个 fonts.ts 文件从 Google Fonts 导入默认字体 Geist,配置适当的子集和 CSS 变量名称,然后导出一个 className 供您在应用程序中使用。这个 CSS 变量随后被应用到共享的 Tailwind 配置中。

默认情况下,fonts.ts 导出一个 sans 和一个 mono 字体,但您可以配置它导出任意数量的字体,例如标题、正文、次要字体等。您也可以通过替换字体名称来完全替换字体,如下所示:

zh/packages/design-system/lib/fonts.ts
import { Acme } from 'next/font/google';

const sans = Acme({ subsets: ['latin'], variable: '--font-sans' });

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