用途:为 Web 项目(尤其是 Next.js + Tailwind)设置字体排版,提供字体搭配推荐与加载性能优化。适用时机包括初始化项目字体、需要字体搭配建议、优化字体加载。
主要能力:按项目类型选择字体;在 Next.js 中配置字体;接入 Tailwind;给出字体搭配预设与常用字体清单。
搭配预设:现代 SaaS(标题 Plus Jakarta Sans,正文 Inter);企业(标题 Source Sans 3,正文 Source Serif 4);编辑类(标题 Playfair Display,正文 Lora);技术/开发(标题 Geist,正文 Inter,代码 Geist Mono);初创/亲和(标题 Outfit,正文 Nunito)。
常用字体:Inter(通用默认)、Plus Jakarta Sans(现代 SaaS)、DM Sans(简洁初创)、Geist(开发工具)、Playfair Display(优雅标题)、Lora(长文阅读)、JetBrains Mono(代码块)。
使用方式:流程为 SELECT → CONFIGURE → APPLY。在 lib/fonts.ts 中用 next/font/google 导入并导出字体,设置 subsets、display 与 variable;在 app/layout.tsx 的 html 上挂载变量类名;在 tailwind.config.ts 的 fontFamily 中引用 CSS 变量。
性能建议:优先使用可变字体;除非多语言否则仅用 latin 子集;始终设置 display: 'swap';next/font 自动自托管,无外部请求。
排版比例:text-xs 12px、text-sm 14px、text-base 16px、text-lg 18px、text-xl 20px、text-2xl 24px、text-3xl 30px、text-4xl 36px。
按项目类型决策:SaaS 仪表盘 Inter/Inter;营销站 Plus Jakarta/Inter;博客 Playfair Display/Lora;开发文档 Geist/Inter;企业 Source Sans/Source Serif。
限制:资料未提供收费、价格、平台支持范围及具体效果数据,暂未提供。