assetx/FONT-SYSTEM.md

# 字体系统配置

## 字体配置对比

### 原型字体配置

**Inter 字体系列**:
- `Inter-Regular` (400) - 常规文本
- `Inter-Medium` (500) - 中等粗细文本
- `Inter-Bold` (700) - 粗体标题和重要文本
- `Inter-ExtraBold` (800) - 特别粗体（不常用）

**JetBrains Mono 字体系列**:
- `JetBrainsMono-Medium` (500) - 中等粗细代码文本
- `JetBrainsMono-Bold` (700) - 粗体代码文本
- `JetBrainsMono-ExtraBold` (800) - 特粗代码文本（数字显示）

### Next.js 项目配置

**字体加载** (`app/layout.tsx`):
```typescript
import { Inter, JetBrains_Mono } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "700", "800"],
  variable: "--font-inter",
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  weight: ["500", "700", "800"],
  variable: "--font-jetbrains",
});
```

**Tailwind 配置** (`tailwind.config.ts`):
```typescript
fontFamily: {
  inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
  jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
},
fontSize: {
  'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
  'body-small': ['14px', { lineHeight: '150%' }],
  'body-default': ['16px', { lineHeight: '150%' }],
  'body-large': ['18px', { lineHeight: '150%' }],
  'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
  'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
},
fontWeight: {
  regular: '400',
  medium: '500',
  bold: '700',
  extrabold: '800',
},
```

## 字体使用指南

### Inter 字体使用

| 组件/场景 | 大小 | 粗细 | Tailwind Class |
|-----------|------|------|----------------|
| 小标题/标签 | 12px | 500/700 | `text-caption-tiny font-medium/bold` |
| 正文/按钮 | 14px | 500/700 | `text-body-small font-medium/bold` |
| 标准正文 | 16px | 400/500 | `text-body-default font-regular/medium` |
| 大标题正文 | 18px | 700 | `text-body-large font-bold` |
| H3 标题 | 24px | 700 | `text-heading-h3 font-bold` |
| H2 标题 | 32px | 700/800 | `text-heading-h2 font-bold/extrabold` |

### JetBrains Mono 字体使用

| 组件/场景 | 大小 | 粗细 | Tailwind Class |
|-----------|------|------|----------------|
| 代码/地址 | 12px | 500/700 | `text-caption-tiny font-jetbrains font-medium/bold` |
| 代码/地址 | 14px | 700 | `text-body-small font-jetbrains font-bold` |
| 数字展示 | 16px | 800 | `text-body-default font-jetbrains font-extrabold` |
| 大数字 | 24px | 700 | `text-heading-h3 font-jetbrains font-bold` |

## 实际应用示例

### 1. 导航菜单项
```tsx
// 激活状态
<span className="text-body-small font-bold text-text-primary">Assets</span>

// 未激活状态
<span className="text-body-small font-medium text-text-tertiary">ALP</span>
```

### 2. 数据卡片
```tsx
// 标签
<p className="text-caption-tiny font-bold text-text-tertiary uppercase">APY</p>

// 数值
<p className="text-heading-h3 font-bold text-orange-500">22%</p>

// 变化
<p className="text-caption-tiny font-medium text-green-500">+2.5% WoW</p>
```

### 3. 钱包地址
```tsx
<span className="text-body-small font-jetbrains font-bold text-white">
  0x12...4F82
</span>
```

### 4. 产品标题
```tsx
// 中文标题
<h1 className="text-heading-h2 font-bold text-text-primary">
  高盈美股量化策略
</h1>

// 英文副标题
<p className="text-body-default font-regular text-text-tertiary">
  High-Yield US Equity Quantitative Strategy
</p>
```

### 5. Global TVL 显示
```tsx
// 标签
<p className="text-[10px] font-medium text-text-tertiary">Global TVL</p>

// 数值 (使用 JetBrains Mono)
<p className="text-body-default font-jetbrains font-extrabold text-text-primary">
  $465,000,000
</p>
```

## 字体加载优化

1. **自动优化**: Next.js 自动优化 Google Fonts 加载
2. **变量字体**: 使用 CSS 变量避免字体闪烁
3. **子集加载**: 仅加载 latin 子集减少文件大小
4. **权重控制**: 只加载需要的字体权重

## 与原型的差异

✅ **已匹配**:
- 所有字体粗细 (400, 500, 700, 800)
- 字号系统 (10px - 32px)
- 行高 (130% - 150%)
- 字间距 (letter-spacing)
- 字体族 (Inter + JetBrains Mono)

⚠️ **注意事项**:
- Next.js 使用 `JetBrains_Mono` (下划线) 而不是 `JetBrains Mono` (空格)
- Tailwind 的 `font-extrabold` 映射到 800，`font-bold` 映射到 700
- 使用 CSS 变量确保字体正确应用到整个应用

## 调试技巧

如果字体显示不正确：

1. 检查浏览器开发者工具 Computed 样式
2. 确认 `--font-inter` 和 `--font-jetbrains` CSS 变量已定义
3. 检查是否正确导入 `globals.css`
4. 清除 `.next` 缓存并重新构建: `rm -rf .next && npm run dev`