assets-back/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):

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):

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. 导航菜单项

// 激活状态
<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. 数据卡片

// 标签
<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. 钱包地址

<span className="text-body-small font-jetbrains font-bold text-white">
  0x12...4F82
</span>

4. 产品标题

// 中文标题
<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 显示

// 标签
<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