该技能是一份字体选择参考,用于为项目挑选更有辨识度的排版,明确建议避开 Helvetica、Arial、Roboto、Open Sans、Montserrat、Playfair Display、Poppins、Lato 等过度使用的字体。所列字体均为 Google Fonts 免费字体,可与 next/font/google 配合使用。
用途与组织方式:按风格(vibe)分类,如编辑/文学、奢华/时尚、现代简洁、粗重/冲击、俏皮、技术/未来、低调,每类给出候选字体;另按 Serif、Sans Serif、Display、Monospace 四个类别说明各字体的典型使用场景;还按人物原型(作家/编辑、设计师、开发者、策略师、艺术家、奢华/时尚)给出方向。
主要能力:提供推荐搭配组合,例如 Editorial 用 Instrument Serif + DM Sans,Modern 用 Bricolage Grotesque + Space Grotesk,Literary 用 Cormorant + Spectral,Tech 用 Space Mono + Inter,Luxury 用 Bodoni Moda + Manrope,Creative 用 Fraunces + Work Sans,Minimal 用 Young Serif + Plus Jakarta Sans。
使用方式:在 Next.js 中从 next/font/google 导入字体并用 variable 定义 CSS 变量,如 import { Space_Grotesk, Newsreader } from 'next/font/google',再调用 Space_Grotesk({ subsets: ['latin'], variable: '--font-heading' }) 与 Newsreader({ subsets: ['latin'], variable: '--font-body' })。
搭配规则:衬线标题配无衬线正文(或相反)以形成类别对比;一款主导、一款辅助,避免争夺注意力;尽量匹配 x-height 以获得视觉和谐;每站最多使用 3 种字体。
限制:资料仅给出字体名称与场景建议,未提供具体授权细节、加载性能数据或完整代码示例之外的实现步骤。