描述：浏览并选择来自Google Fonts或精选配对的字体。用于为设计项目找到完美的字体排版。允许工具：

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

字体选择器

浏览、选择和应用字体用于前端设计。

目的

这个技能通过以下方式帮助选择完美字体：

浏览Google Fonts上的热门字体
基于美学建议配对
生成Google Fonts导入
映射到Tailwind配置
当浏览器不可用时提供精选后备字体

浏览器工作流程

步骤1：导航到Google Fonts

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

步骤2：浏览字体

截取热门字体截图：

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

呈现给用户：“以下是热门字体。哪种风格吸引了您？”

步骤3：搜索特定字体

如果用户有偏好：

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

步骤4：查看字体详情

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

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

步骤5：选择字体

获取用户的选择：

显示/标题字体：用于标题、英雄文本
正文字体：用于段落、可读文本
等宽字体（可选）：用于代码、技术内容

步骤6：生成导入

创建Google Fonts导入：

<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字体配置：

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

后备模式

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

如何使用后备

询问用户所需的美学
从references/font-pairing.md呈现相关配对
让用户选择或请求调整
提供所选字体的导入代码

快速美学匹配

美学	推荐配对
暗黑与高级	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高度以求和谐
限制到2种字体（最多3种含等宽体）

权重分布：

标题：粗体 (600-900)
副标题：中粗 (500-600)
正文：常规 (400)
说明文字：细到常规 (300-400)

尺寸比例

使用一致的字体比例：

/* 小三度 (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模板
许多工具的默认字体
无独特特征
信号“未做设计决策”

输出格式

提供所选字体排版格式：

## 所选字体排版

### 字体堆栈
| 角色 | 字体 | 权重 | 后备 |
|------|------|---------|----------|
| 显示 | 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>
\`\`\`

参考

见references/font-pairing.md：

按美学精选字体配对
字体分类指南
高级配对技术
性能考虑