关于 fonts
面向设计师和开发者的数字排版字体参考，按风格和用途整理 Google Fonts，并提供字体搭配建议及 Next.js 示例。
主要功能
- 01按视觉风格整理字体
- 02按字体类别提供建议
- 03按职业类型推荐字体
- 04标题与正文字体搭配
- 05Next.js 字体加载示例
适用场景
- 01为编辑类版面选择字体
- 02搭配展示字体与正文字体
- 03为作品集选择字体
- 04在 Next.js 中加载 Google Fonts
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/fonts确认已加载。
详细介绍
技能：字体
选择具有鲜明特色的字体参考。避免使用过于常见的字体（Helvetica、Arial、Roboto、Open Sans、Montserrat、Playfair Display、Poppins、Lato）。
以下所有字体均可通过 Google Fonts 免费使用，并兼容 next/font/google。
按风格分类
| 风格 | 字体 |
|---|---|
| 编辑／文学 | Newsreader、Lora、EB Garamond、Cormorant、Spectral |
| 奢华／时尚 | Cormorant Garamond、Bodoni Moda、Libre Bodoni、Fraunces |
| 现代简洁 | Space Grotesk、DM Sans、Plus Jakarta Sans、Manrope |
| 醒目／强烈 | Bricolage Grotesque、League Spartan、Syne、Outfit |
| 活泼 | Rubik、Nunito、Comfortaa、Quicksand |
| 技术／未来感 | Space Mono、JetBrains Mono、Fira Code、IBM Plex Mono |
| 低调 | Mulish、Chivo、Proza Libre、Work Sans |
衬线字体
| 字体 | 适用场景 |
|---|---|
| Cormorant | 高对比度的优雅风格、编辑类标题、奢华感 |
| Cormorant Garamond | 洗练而权威的风格、精致的编辑排版 |
| Lora | 优雅的正文、博客内容、小字号下仍清晰易读 |
| EB Garamond | 经典书籍排版、长篇阅读 |
| Newsreader | 杂志／编辑类版式、新闻感 |
| Spectral | 兼具个性与平衡感的正文 |
| Fraunces | 现代可变衬线字体，个性鲜明，9 种字重 |
| Bodoni Moda | Didone 风格标题、时尚／奢华风格 |
| Libre Bodoni | 简洁的 Bodoni 替代字体，适用于展示文字 |
| Libre Baskerville | 文学气息（Mrs Eaves 的替代字体） |
| Young Serif | 温暖的现代标题 |
| Instrument Serif | 现代精致的衬线字体，适用于编辑排版 |
| Alegreya | 字形鲜明，适合精致的作品集 |
| BioRhyme | 适用于编辑版式的板衬线字体，7 种字重 |
无衬线字体
| 字体 | 适用场景 |
|---|---|
| Space Grotesk | 当代品牌设计、几何个性 |
| DM Sans | 人文主义设计、Futura 的替代字体、独特的“G”字形 |
| Plus Jakarta Sans | 现代 UI、个性鲜明 |
| Manrope | 简洁的几何无衬线字体，7 种字重 |
| Outfit | 几何人文主义风格、现代作品集 |
| Bricolage Grotesque | 醒目标题、富有表现力与个性 |
| Syne | 富有触感的独特风格、创意作品集 |
| Chivo | 用途广泛的主力字体，9 种字重 |
| Work Sans | 针对屏幕优化、友好且专业 |
| Mulish | 人文主义与几何风格的融合，可变字体 |
| Epilogue | 温暖的几何风格 |
| Proza Libre | 低调的精致感、编辑排版 |
| League Spartan | 窄体几何风格、醒目的标题 |
| Inter | 专注 UI，易读性出色（谨慎使用——正变得越来越常见） |
展示字体
| 字体 | 适用场景 |
|---|---|
| Bricolage Grotesque | 富有表现力的标题、鲜明个性 |
| Fraunces | 字重范围丰富的可变衬线字体 |
| Instrument Serif | 现代编辑类标题 |
| Young Serif | 温暖的现代标题 |
| Abril Fatface | 醒目的 Didone 风格展示字体 |
| Rubik Glitch | 实验／科技美学 |
| Silkscreen | 复古像素／终端美学 |
| Aboreto | 风格鲜明的展示字体 |
| Red Rose | 富有表现力的标题 |
等宽字体
| 字体 | 适用场景 |
|---|---|
| Space Mono | 开发者作品集、风格鲜明 |
| JetBrains Mono | 代码展示、易读性出色 |
| Fira Code | 支持连字的编程字体 |
| IBM Plex Mono | 技术文档、专业用途 |
| Inconsolata | 经典代码风格 |
| Source Code Pro | 简洁、用途广泛的等宽字体 |
按人物原型分类
| 人物 | 方向 |
|---|---|
| 作者／编辑 | Newsreader、Lora、EB Garamond、Spectral |
| 设计师 | Space Grotesk、Bricolage Grotesque、Fraunces |
| 开发者 | Space Mono、JetBrains Mono、IBM Plex Mono |
| 策略师 | Cormorant Garamond、Chivo、DM Sans |
| 艺术家 | Syne、Rubik、Instrument Serif |
| 奢华／时尚 | Bodoni Moda、Cormorant、Libre Bodoni |
推荐搭配
| 风格 | 标题 + 正文 |
|---|---|
| 编辑风格 | Instrument Serif + DM Sans |
| 现代风格 | Bricolage Grotesque + Space Grotesk |
| 文学风格 | Cormorant + Spectral |
| 科技风格 | Space Mono + Inter |
| 奢华风格 | Bodoni Moda + Manrope |
| 创意风格 | Fraunces + Work Sans |
| 极简风格 | Young Serif + Plus Jakarta Sans |
在 Next.js 中使用
import { Space_Grotesk, Newsreader } from 'next/font/google';
const heading = Space_Grotesk({
subsets: ['latin'],
variable: '--font-heading'
});
const body = Newsreader({
subsets: ['latin'],
variable: '--font-body'
});
搭配规则
- 形成类别对比：衬线标题字体 + 无衬线正文字体（或反过来）
- 一种字体为主，另一种为辅（切勿争抢注意力）
- 尽可能匹配字面高度，以实现视觉和谐
- 每个站点最多使用 3 种字体
评论
支持 Markdown