界面设计
字体排版
自定义字体及其使用方法
设计系统包包含一个预配置的字体文件,该文件已连接到所有应用程序。这个 fonts.ts
文件从 Google Fonts 导入默认字体 Geist,配置适当的子集和 CSS 变量名称,然后导出一个 className
供您在应用程序中使用。这个 CSS 变量随后被应用到共享的 Tailwind 配置中。
默认情况下,fonts.ts
导出一个 sans
和一个 mono
字体,但您可以配置它导出任意数量的字体,例如标题、正文、次要字体等。您也可以通过替换字体名称来完全替换字体,如下所示:
zh/packages/design-system/lib/fonts.ts
您也可以本地加载字体。更多信息请参阅 Next.js 文档。