---
name: 字体选择器
description: 从 Google Fonts 浏览和选择字体，掌握 Tailwind CSS 字体系统（font-size scale、font-family stack、letter-spacing、line-height），为设计项目找到完美的字体排版。
emoji: ✒️
color: pink
lead: 项目经理
allowed-tools:
  - AskUserQuestion
  - mcp__claude-in-chrome__tabs_context_mcp
  - mcp__claude-in-chrome__tabs_create_mcp
  - mcp__claude-in-chrome__navigate
  - mcp__claude-in-chrome__computer
  - mcp__claude-in-chrome__read_page
  - mcp__claude-in-chrome__find
group: 设计部
---

# 字体选择器

浏览、选择和应用前端设计的字体排版。

## 目的

这个技能帮助选择完美的字体：
- 在 Google Fonts 上浏览热门字体
- 根据美学建议配对
- 生成 Google Fonts 导入代码
- 映射到 Tailwind 配置
- 当浏览器不可用时提供精选备选

## 浏览器工作流

### 步骤 1：导航到 Google Fonts

```javascript
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://fonts.google.com/?sort=trending", tabId: tabId })
```

### 步骤 2：浏览字体

截取热门字体的截图：

```javascript
computer({ action: "screenshot", tabId: tabId })
```

向用户展示："这些是热门字体，什么风格吸引你的眼球？"

### 步骤 3：搜索特定字体

如果用户有偏好：

```javascript
navigate({ url: "https://fonts.google.com/?query=Outfit", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
```

### 步骤 4：查看字体详情

点击字体查看所有字重和样式：

```javascript
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
```

### 步骤 5：选择字体

获取用户的选择：
- **展示/标题字体**：用于标题、hero 文字
- **正文字体**：用于段落、可读文字
- **等宽字体**（可选）：用于代码、技术内容

### 步骤 6：生成导入

创建 Google Fonts 导入：

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">
```

### 步骤 7：生成配置

创建 Tailwind 字体配置：

```javascript
tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        display: ['Fraunces', 'serif'],
        body: ['Outfit', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      }
    }
  }
}
```

---

## 备选模式

当浏览器工具不可用时，使用精选配对。

### 如何使用备选

1. 询问用户想要的美学风格
2. 从 `references/font-pairing.md` 展示相关的配对
3. 让用户选择或请求调整
4. 提供所选字体的导入代码

### 快速美学匹配

| 美学 | 推荐配对 |
|------|---------|
| 深色 & 高端 | Fraunces + Outfit |
| 极简 | Satoshi + Satoshi |
| 新野兽派 | Space Grotesk + Space Mono |
| 编辑风 | Instrument Serif + Inter |
| Y2K/赛博 | Orbitron + JetBrains Mono |
| 斯堪的纳维亚 | Plus Jakarta Sans + Plus Jakarta Sans |
| 企业 | Work Sans + Inter |

---

## 字体排版最佳实践

### 字体配对规则

**对比，而非冲突：**
- 衬线配无衬线
- 展示字体配可读正文
- 匹配 x-height 以协调
- 限制在 2 种字体（最多 3 种含等宽）

**字重分布：**
- 标题：粗体 (600-900)
- 副标题：中等 (500-600)
- 正文：常规 (400)
- 说明：轻到常规 (300-400)

### 尺寸比例

使用一致的字体比例：

```css
/* 小三度 (1.2) */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
--text-6xl: 3.75rem;   /* 60px */
--text-7xl: 4.5rem;    /* 72px */
```

### 行高

| 内容类型 | 行高 | Tailwind 类 |
|---------|------|-------------|
| 标题 | 1.1 - 1.2 | leading-tight |
| 副标题 | 1.25 - 1.35 | leading-snug |
| 正文 | 1.5 - 1.75 | leading-relaxed |
| 小字 | 1.4 - 1.5 | leading-normal |

### 字间距

| 用途 | 间距 | Tailwind 类 |
|------|------|-------------|
| 全大写 | 宽 | tracking-widest |
| 标题 | 紧到正常 | tracking-tight |
| 正文 | 正常 | tracking-normal |
| 小大写 | 宽 | tracking-wide |

---

## 避免的字体

**过度使用（瞬间"模板"感）：**
- Inter（AI 默认字体）
- Roboto（Android 默认）
- Open Sans（2010 年代早期网页）
- Arial / Helvetica（除非有意的瑞士风格）
- Lato（过度曝光）
- Poppins（2020 年代过度使用）

**为什么这些感觉通用：**
- 每个 Figma 模板都在用
- 很多工具的默认字体
- 没有独特特征
- 信号"没有做设计决策"

---

## 输出格式

以以下格式提供所选字体排版：

```markdown
## 已选字体排版

### 字体栈
| 角色 | 字体 | 字重 | 备选 |
|------|------|------|------|
| 展示 | Fraunces | 400, 700 | serif |
| 正文 | Outfit | 400, 500, 600 | sans-serif |
| 等宽 | JetBrains Mono | 400 | monospace |

### Google Fonts 导入
\`\`\`html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
\`\`\`

### Tailwind 配置
\`\`\`javascript
fontFamily: {
  display: ['Fraunces', 'serif'],
  body: ['Outfit', 'sans-serif'],
  mono: ['JetBrains Mono', 'monospace'],
}
\`\`\`

### 使用示例
\`\`\`html
<h1 class="font-display text-6xl font-bold leading-tight">
  标题
</h1>
<p class="font-body text-lg leading-relaxed">
  正文内容在这里。
</p>
<code class="font-mono text-sm">
  代码示例
</code>
\`\`\`
```
