164 lines
4.6 KiB
Markdown
164 lines
4.6 KiB
Markdown
# 字体系统配置
|
||
|
||
## 字体配置对比
|
||
|
||
### 原型字体配置
|
||
|
||
**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`
|