From 70e4f44860f7cdc77d80cb4c89cebe2bfa93e568 Mon Sep 17 00:00:00 2001 From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com> Date: Wed, 15 Apr 2026 08:45:23 +0800 Subject: [PATCH] style(fonts): add text-autospace for CJK+Latin auto-spacing and sync design doc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - packages/ui/styles/base.css: add `text-autospace: ideograph-alpha ideograph-numeric` to html. Native CSS feature (Chrome 119+, Electron recent) that auto-inserts 1/4em space between CJK ideographs and Latin letters/numerals. Progressive enhancement — older browsers ignore the rule silently. - docs/design.md: update font family table to reflect Inter + CJK system fallback. Reword font-bold ban rationale to be font-agnostic (information density / layout rhythm), not Geist-specific. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/design.md | 6 ++++-- packages/ui/styles/base.css | 4 ++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/design.md b/docs/design.md index 3a0bb9a65..896063286 100644 --- a/docs/design.md +++ b/docs/design.md @@ -69,10 +69,12 @@ | 角色 | 字体 | 用途 | |------|------|------| -| 正文/UI | Geist Sans (`--font-sans`) | 所有界面文字的默认字体 | +| 正文/UI | Inter (`--font-sans`) | 所有界面文字的默认字体；CJK 字符自动 fallback 到系统字体（PingFang SC / Microsoft YaHei / Noto Sans CJK SC） | | 代码/数据 | Geist Mono (`--font-mono`) | 代码块、ID、时间戳、等宽数据 | | 标题 | `--font-heading`（= `--font-sans`） | 页面标题、区块标题 | +字体栈在 `apps/web/app/layout.tsx` 和 `apps/desktop/src/renderer/src/globals.css` 两处声明，修改时需同步。 + ### 3.2 字号纪律 **整个项目只使用 3 个核心字号 + 1 个特殊字号：** @@ -98,7 +100,7 @@ | `font-normal` (400) | 正文、描述、大部分文字 | | `font-medium` (500) | 标签、按钮、导航项、标题、选中状态 | -**禁止** `font-bold` / `font-semibold`——它们在 Geist 字体下显得突兀，破坏界面的"轻"感。如果需要更强的强调，用更大的字号或 `foreground` 色值，而不是加粗。 +**禁止** `font-bold` / `font-semibold`——任务管理工具追求信息密度和"轻"感，加粗会破坏层次节奏。如果需要更强的强调，用更大的字号或 `foreground` 色值，而不是加粗。 --- diff --git a/packages/ui/styles/base.css b/packages/ui/styles/base.css index 7b4ca17c6..72422005c 100644 --- a/packages/ui/styles/base.css +++ b/packages/ui/styles/base.css @@ -73,5 +73,9 @@ } html { @apply font-sans; + /* Auto-insert 1/4em space between CJK ideographs and Latin letters/numerals. + * Native CSS text-autospace (Chrome 119+, Electron recent versions). + * Progressive enhancement: browsers that don't support it simply ignore the rule. */ + text-autospace: ideograph-alpha ideograph-numeric; } }