字体排版

默认字体

JetBrains Mono 是整个应用的默认字体。等宽字体是财务数据的首选，因为数字宽度一致，使数字列易于扫视。

css

--font-family-mono: "JetBrains Mono", ui-monospace, monospace;

基础设置

属性	值
基础字体大小	14px (`--base-font-size`)
行高	1.5
渲染	反锯齿 (`-webkit-font-smoothing: antialiased`)

字体选项

提供 9 种字体。通过 设置 > 字体排版 或标题中的 SettingsPopover 切换。ThemeProvider 在挂载时从 Google Fonts 加载字体。

字体	类别	说明
JetBrains Mono	等宽	默认。清晰的数字，非常适合财务数据。
Fira Code	等宽	编程连字。
Source Code Pro	等宽	Adobe 出品。干净中性。
IBM Plex Mono	等宽	经典技术美学。
Roboto Mono	等宽	Google 出品。均匀的字符宽度。
Ubuntu Mono	等宽	独特、略带圆润。
Cascadia Code	等宽	微软出品。支持连字。
Inter	无衬线	比例字体。更宽敞，适合密集文本。
Geist	无衬线	Vercel 出品。现代几何比例字体。

预设	大小	CSS 变量值
小	12px	`--base-font-size: 12px`
中（默认）	14px	`--base-font-size: 14px`
大	16px	`--base-font-size: 16px`

数字格式化

财务数字使用表格数字以实现右对齐列。应用 .tabular-nums 工具类或直接使用 CSS 属性：

css

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

所有货币值右对齐，并通过 src/lib/formatting.ts 的 formatNZD() 格式化。这确保了一致的 NZD 货币格式（如 $1,234.56）。

文本层次

设计系统使用大小和透明度来建立层次，而非字重：

角色	大小	颜色变量	示例
面板标题	11px	`--color-text-muted`	大写、加宽字间距、中等字重
正文	12-13px	`--color-text-primary`	默认内容
次要文本	11-12px	`--color-text-secondary`	辅助细节
柔和文本	10-11px	`--color-text-muted`	标签、时间戳

字体加载

ThemeProvider 在挂载时通过单个 <link> 元素从 Google Fonts 加载所有字体系列。加载的字重：400、500、600、700（Ubuntu Mono：仅 400、700）。

typescript

// ThemeProvider 在挂载时加载这些字体
const fonts = [
  'JetBrains+Mono:wght@400;500;600;700',
  'Fira+Code:wght@400;500;600;700',
  'Source+Code+Pro:wght@400;500;600;700',
  'IBM+Plex+Mono:wght@400;500;600;700',
  'Roboto+Mono:wght@400;500;600;700',
  'Ubuntu+Mono:wght@400;700',
  'Inter:wght@400;500;600;700',
  'Plus+Jakarta+Sans:wght@400;500;600;700',
];

字体切换即时生效。当主题存储中的字体选择改变时，ThemeProvider 在 document.documentElement 上设置 --font-family-mono。

字体排版 ​

默认字体 ​

基础设置 ​

字体选项 ​

字体大小 ​

数字格式化 ​

文本层次 ​

字体加载 ​