dfmsolutions/AOS
1
0 Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
a6793a72d2c63c43afba9526927bcedd1dfd0930
AOS/skills/design/horizontal-craft/chinese-typography.md
T
Z User e45b68bb8b feat: IMAP mail sync with thread-to-contact matching (PRD §6.1) 
Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
2026-10-27 22:50:50 +00:00

19 KiB
Executable File
Raw Blame History

name, description
name description
chinese-typography 给中文排版做决策时使用。覆盖：版心 / 页边距 / 字号 / 字重 / 字间距 / 行距 / 行长 / 段落缩进 / 标点占格 / 网格系统 / 字体选择与搭配 / 横排直排混排 / 标题断句 / 破折号 / 全角半角 / 避头尾。触发场景：书籍排版、长文/文章页、PDF 报告、H5/海报、PPT/Keynote、网页正文、画册、招股书、PRD/技术文档、古籍/文言、公文、邀请函、博物馆图录，或任何"中文阅读体验不舒服"的诊断与修正。

中文字体排版 Chinese Typography

"模数 → 网格 → 版心 → 文本造型"方法论。核心一句话：把一个页面的所有空间要素（版心、页边距、字号、行距、字距）都关联到一个共同的模数（基因）上，让秩序看得见、看不见地存在。

格 = 工具属性的网格（理性）；律 = 设计师对格的使用（灵性）。美比严格按网格排列更重要。

什么时候启用本 skill

  • 用户让你"排个版面 / 做个文档 / 调下样式 / 设计 H5 / 写一份正式 PDF / 做古籍样式 / 排公文"，且文本主体是中文
  • 用户指出"这页看着乱 / 难读 / 不专业 / 不像出版物 / 字太挤 / 行太长 / 标题断得奇怪"
  • 用户在 CSS / Tailwind / InDesign / Figma / PPT / Keynote / Word / Typst / LaTeX 上做中文长文样式
  • 用户问"用多大字 / 多大行距 / 多宽的栏 / 留多少白 / 横排还是直排 / 标题怎么换行"
  • 用户做"中国最美的书"风、出版社风、博物馆图录风、学术风、商务报告风、古典/书法风的设计

触发时务必先问自己 3 个方向题

  1. 横排还是直排？ 古籍今译、文言、诗词、邀请函、传统书法集、博物馆图录的部分内页 → 优先考虑直排；现代长文、教材、商务文档 → 横排。
  2. 是否有混排？ 横排中嵌入直排（标题/匾额、对联、引文造型）、直排中嵌入横排（西文术语、数字、图注）都是常用手法，不是"破格"，是基础语法。
  3. 地区风格？ 大陆简体（横排标点偏左下、直排偏右上、开明式标点）/ 港台繁体（标点居中、可不严格避头尾）/ 日文（标点偏左下/右上、严格避头尾）。差异主要在标点位置与避头尾松紧，不要混着用。

详见 reference/directions.md。

九条最关键的规则（按重要性）

1. 先决定排版方向，再决定一切版心

  • 直排：文字上→下、行右→左；页面右翻、装订右侧；图/表标题左右侧；点号"，。；："偏右上；引号用直角「」『』
  • 横排：文字左→右、行上→下；页面左翻、装订左侧；图/表标题上下方；大陆点号偏左下；引号用弯""''
  • 混排：直排中遇 1 字英文/缩略词 → 正立排；遇 2–3 位数字 → 纵中横排（tate-chu-yoko）；遇整段西文 → 顺时针 90° 旋转
  • 不要把日文标点规则套到中文（如直排冒号转 90° 躺下是日文做法，中文要直立）

2. 标题断句必须按词，不按字数

用户最常踩的坑。

  • 正文：默认按字断行，不要按词；汉语双音节词约占 60%，按词断会变锯齿状不美。
  • 标题：必须按词断，否则会出歧义（反例："我外交部强烈谴责伊拉克 / 大使馆被炸事件"）。
  • 虚词位禁忌："的"不入行首；"和 / 与 / 及 / 或"不入行末；地名/人名/书名/术语严禁拆开。
  • 标题占行必须是正文行高整数倍：一级 4–5 行、二级 2–3 行、三级 1–2 行、双行题 3 行。
  • 大标题必出现在奇数页（横排左翻书 = 右页 / 直排右翻书 = 左页）。
  • 写 HTML 时手动加 <wbr> 或 <br> 控制断点；CSS 不可断字符之间用 &#8288;（U+2060 WJ）。

详见 reference/title-and-breaking.md。

3. 先定模数（modulus），再定一切

所有字号、行距、页边距、版心宽高，都必须是同一个模数（典型 1.5pt 或 0.5pt）的整数倍。模数像"基因"贯穿全书。

  • 入门默认：模数 = 1.5pt，正文 9pt（= 6×1.5pt），图注 6pt，小标题 12pt
  • 不要用 1.618pt 这种带小数的"黄金比"做模数——汉字是定宽方格，多位小数会让单元格宽算不齐
  • 1–5pt 字号用 0.5pt 步进，6–12pt 用 1pt 步进（铅字时代沿用至今的可整除性）

4. 行长必须是字号整数倍

这是 W3C《中文排版需求》§2.3.5 明文要求，不是建议。

  • 公式：行长 = 字号 × 字数；不整倍会导致两端对齐时末行字距异常（错版信号）。
  • 横排正文 17–40 字最佳，硬上限 ≤48 字；直排正文 ≤55 字；行长最小 ≥10 字（少于 10 字回行频繁、易疲劳）。
  • 在 CSS：max-width: 30em 是对中文最稳的护栏（西文是 65–75 字符 ≈ 35em）。
  • 拉宽页面就增加栏数，不是无限拉长行。
  • 框架高公式：高 = (行数 − 1) × 行高 + 字号，末行只占字号高度，不要把高度凑整成 mm。

5. 行距 = 字号的 50%–100%（即 1.5–2 倍行高）

  • W3C 标准：行距（行间空白） = 字号的 50%–100%，对应行高（含字本身）= 字号的 1.5–2 倍。
  • 现代屏幕舒适：line-height: 1.5；长文/文学：1.7–2.0；密集表格：1.33。
  • 超过字号 100% 不增易读性（即 line-height 超过 2）；过窄（< 1.2）密集；过宽（> 2.2）章节断裂感。
  • 直排带注音时，行距 ≥ 1.5 × 基字。
  • 行间有专名号 / 着重号 / 书名号甲式时，单面装行距 ≥ 1/2 字号，双面装 ≥ 5/8 字号。

6. 版心位置略偏上、内紧外松、上紧下松

  • 横排书籍：版心略往上移取得视觉最佳点
  • 对页（书籍/PDF）：订口（内）< 切口（外）< 天头（顶）< 地脚（底）（典型比例 3:5:8:13 或 2:3:5:8）
  • 直排对页相反：天头 < 地脚（与横排相同），但订口（右页右侧 / 左页左侧）< 切口
  • 页边距太小，文字会"扑面而来"产生压迫；版心是负形的留白决定优雅程度
  • 先定版心再余白（中式）——不是西式"先留边距后剩版心"

7. 字间距：原则上不动（密排）

  • 现代汉字字体的字面率 92%–96%，字与字之间已天然留白；正文不要再加 letter-spacing
  • CSS：letter-spacing: 0（不要设 0.05em 这种"看着精致"的间距，会破坏字号节奏）
  • 只有标题、Logo、空间表达情绪时才主动加字距
  • 疏排（增加字距）的合理场景：标题求平衡、图说求平衡、短诗词、儿童读物；常见 1/4 em / 1/3 em / 1/2 em / 1 em

8. 字重和字号联动选择，控制纸/屏对比度

  • 小字（6–7.5pt 印刷 / < 14px 屏幕）：中等字重（Regular / 55S）辨识度最高，避免极细字重
  • 大字（≥ 9pt 印刷 / ≥ 16px 屏幕）：可以用 Light/45S 取得优雅感
  • 屏幕白底深色文字 ≥ 4.5:1 对比度（WCAG AA）；纸面看"字的黑能否压过纸的白"
  • 同一段文本只用 1 个字体家族的不同字重，不要混 4 个字体
  • 正文最小字号下限：W3C 规定 6 号 = 7.875pt（≈ 2.8mm），更小汉字结构难辨

9. 标点必须按"加法模式"做宽度调整，并严格避头尾

横排中文易忽略的最大问题。 大陆默认开明式（句末全宽、句内半宽）；港台默认居中式；行末标点一律半宽（GB/T 15834-2011 §5.1.10）。

  • 选 1 种标点风格贯穿全文：全角式 / 半角式 / 开明式 / 居中式（详见 reference/punctuation.md）
  • 加法模式：标点 = 半宽 + 加空隙；调整对象是空隙，不是字面。InDesign / QuarkXPress / JIS 都按加法。
  • 避头尾必须做：basic 级 = 最低标准（行首禁顿逗句冒分叹问、结束引括书名号；行尾禁开始引括书名号）；正式中文出版用 GB 级 / strict 级
  • 行首禁止：。，、；：？！…—）》」』等；行尾禁止：（《「『"
  • 段落缩进首行 2 字（text-indent: 2em），段间不空行；引文整段缩进 4 字
  • 不可分离禁则：破折号 / 省略号 / 数字内 / 数字+单位 / 上下标+被注词 / 西文单词 都不可被换行拆开

详见 reference/punctuation.md。

表现力手法（严谨之上，让中文版面有亮点、有节奏，而不是平铺）

上面九条保证"排得严谨、专业、不外行"。但严谨不等于出彩——一篇规范却平淡的长文，正文+标题+段落一路平铺，没有视觉锤、没有节奏，就是常见的"中文排版很无聊"。对长文 / 编辑页 / 海报 / 画册 / 公众号 / 任何想要有设计感的中文页，在守住九条的前提下，主动用下面的手法做出亮点（按内容选 1–3 个，不要全堆）：

  • 标题字号大反差。 正文与主标题拉开 3–5 倍字号跨度（正文 16px → 主标 clamp 到 48–96px+），让标题成为视觉锤，而不是"大一号的正文"。中文方块字在大字号下张力很强，敢放大。
  • 字重对比制造焦点。 同一屏里用"特粗大字 + 常规正文 + 细体辅助信息"三档字重拉开层次；中文避免堆砌多字重，2–3 档即可，但对比要敢拉开。
  • 首字下沉 / 段首装饰。 文章开篇或章节起始用首字下沉（2–3 行高）或放大的起首句，给阅读一个明确的"入口仪式"。
  • 横竖混排做造型。 横排正文中嵌竖排标题/引文/章节名（参考第 1 条），是中文特有的造型语法——竖排标题贴边、竖排短引文做侧栏，立刻有"中文设计感"而非"翻译腔网页"。
  • 引文 / 金句造型块。 把关键句拎出来放大成独立造型块（大字号、留白、或配标点装饰），作为长文的节奏停顿点和记忆点，而不是夹在段落里。
  • 大字标题 / 数字作版面主体。 海报、章节页、数据页可以让一行大字或一个大数字占据大半视口，正文退为辅助——文字本身就是画面。
  • 节奏：快慢交替。 标题区/引文区/图版区是"慢、重、大"，正文区是"快、轻、密"，靠字号留白的明暗交替制造翻页般的节奏，避免从头到尾一个密度。

底线：这些手法服务内容与可读性，不是炫技。表现力建立在九条严谨规则之上——先排得对，再排得出彩；大字反差、混排造型不能破坏避头尾、行长模数、版心秩序。该克制的场景（公文、正式报告正文）保持安静，该出彩的场景（编辑长文、海报、品牌内容）主动用。

用之前必读的设计哲学

  1. 网格是工具不是枷锁。瑞士派"具有建设性的、可供分析和理解的设计"——网格能让最普通的排印公司也做出优雅版面，但优秀作品总在恰当的时候"破格"
  2. 直觉是伪装的记忆——经过训练的直觉才有效；新人先严格守规则，老手再有意识地破规则
  3. 正形 vs 负形：版心是正形，页边距是负形，负形甚至优先于正形成为审美判断依据。留白不是空，是设计
  4. 一书一宇宙：宏伟来自精妙细节。标点占格、行距数值这种"小事"是阅读舒适度的核心
  5. 理性建筑感与灵性诗意的张力：中文排版同时需要欧氏几何/费氏数列的理性，与"格律美"的灵性
  6. 基础概念不可违背，大原则不宜违背，多选项按优先顺序构建自洽逻辑（"孔雀计划"序）
  7. 字体设计 ≠ 字体排印。skill 范围限定后者；不要陷入字体本身好坏的讨论，而要管"怎么用"

标准工作流（任何媒介通用）

按这个顺序决策，不要跳步：

  1. 确定排版方向：横排 / 直排 / 混合；地区风格（大陆 / 港台 / 日式）
  2. 确定开本/画布：纸面用毫米，屏幕用 px，纵横比常用 2:3 / 3:4 / 16:9 / 5:8
  3. 确定正文字号：印刷 9pt / 屏幕 16px / H5 看视距
  4. 确定模数：通常 = 正文字号 / 6 或 / 4（如正文 9pt → 模数 1.5pt；正文 16px → 模数 4px）
  5. 建版心：开本 = 正文字号 × 整数（如 60 字宽 × 90 字高 = 540×810pt）。先版心，后余白
  6. 设页边距：按模数的整数倍设 L/R/O/U，遵守"内紧外松、上紧下松"
  7. 算分栏：每栏 17–40 字（栏间距也是模数整数倍，常用 2 字宽 = 18pt）
  8. 设行距：字号 × 1.5~2，且必须是模数整数倍
  9. 定字号体系：标题 / 小标题 / 正文 / 图注 / 注释 / 页码，全部模数倍数；标题必须是正文行高整数倍
  10. 选字体：1 个家族多个字重；为衬线/无衬线、宋/黑/楷/仿宋做出与内容气质匹配的选择
  11. 设标点风格：全角 / 半角 / 开明 / 居中，全文统一
  12. 排印 + 检查标点占格 + 检查回行 + 检查标题断句 + 检查文本灰度均匀 + 检查孤行孤字

字体选择分流规则（不在本文件直接选字体）

本文件负责中文排版 baseline：版心、行长、行距、段落、标点、标题断句、阅读灰度。不要从本文件选择具体展示字体。

字体选择按两层处理：

普通中文 Web / UI / H5 / 原型正文
→ 使用安全系统字体栈，不读取 `reference/fonts.md`

字体会显著影响视觉方向，或需要命名字体 / 上传字体 / OSS 字体 / CDN 字体
→ 必须读取 `reference/fonts.md`

需要选字体时读 reference/fonts.md：§ 一 选字体（气质→字体表）→ § 二 加载执行（含 § 2.5 组装 font-family）。字体的选择和加载都在该文件内完成，不要再拆成额外文件。

安全默认字体栈

普通中文 Web、UI、H5、表单、Dashboard、工具页正文，默认使用系统中文字体栈。中文字体必须放在西文字体之前，保护中文标点、破折号、省略号和全角符号。

font-family: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC",
             "Microsoft YaHei UI", "Microsoft YaHei",
             system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

正文不要使用展示字体、书法字体、游戏字体、强装饰字体。标题可以更有性格，但必须先进入 reference/fonts.md 做场景筛选。

从 fonts.md 选定了具体字体（尤其是给英文单独指定了 Latin 字体）后，写 font-family 时务必按 reference/fonts.md § 2.5 组装：含中文的页面，font-family 里必须显式出现一个 CJK 字体名，Latin 字体后面绝不能直接接 system-ui（否则中文 fallback 不可控）。

必须读取 reference/fonts.md 的情况

只要命中下列任一条件，就不要在本文件内凭感觉选字体，必须读取 reference/fonts.md：

触发条件 为什么必须读 fonts.md
封面、海报、小红书、公众号首图、PPT 封面、活动页、主视觉 标题字体会直接决定视觉气质
用户给了字体相关风格词：科技感、工业感、文学感、古籍感、学术感、杂志感、高级感、正式、公文、书卷气、手作感 这些不是排版 baseline，属于字体场景选择
用户明确提到字体、字形、字感、宋体、黑体、楷体、仿宋、标题字、展示字 已进入字体选择任务
需要命名字体、上传字体、OSS 字体、CDN 字体、@font-face 或自托管字体 必须确认是否可加载、是否有 fallback
长文、报告、公众号、白皮书、出版感页面且字体会影响阅读气质 需要在宋/黑/楷/仿宋和字面率之间做选择
品牌页、产品发布页、作品集、内容型页面需要明显字体人格 字体是风格来源，不应只用系统栈
当前视觉方向会被字体选择明显改变 不允许从本文件的默认字体栈直接跳到展示字体

何时不读 reference/fonts.md

以下情况可以只用安全系统字体栈：

  • 普通产品 UI、Dashboard、后台、表单、工具页正文；
  • 用户没有字体/风格诉求，且字体不会明显改变视觉方向；
  • 设计系统或模板已经提供了明确字体方案；
  • 当前任务只是局部间距、行高、断句、标点、版心调整。

OSS / 测试字体加载

不要直接按字体名或 URL 挑字体。先在 reference/fonts.md § 一 完成场景筛选；选中的字体若需真实加载，用 § 二 同文件内的 URL 表和 @font-face 模板完成，并按 § 2.5 组装 font-family。

常见错误与诊断

症状 原因 修法
"看着挤、累" 行长 > 48 字 或 行距 < 1.3 缩窄版心 / 加大 line-height 到 1.5–1.7
"看着空、散" 行距 > 2.0 或 字号过小 收紧行距，或字号 +1 步进
"页面里有白块/虫蛀感" 全角标点连用未挤压 启用 InDesign 中文排版设置 / CSS text-spacing-trim
"字号一堆，乱" 字号不在同一模数 重建字号体系，全部 = 模数 × 整数
"层级不清" 字号差 < 1.5×、或字重差不够 加大字号比 或 改字重，不要靠颜色撑层级
"页边距怪" 上下左右一样宽 改成 内 < 外 < 上 < 下 的递增关系
"标题断得莫名其妙" 按字数硬断，把词撕开 手动 <wbr> 在词间断；虚词"的"前不断、"和"后不断
"末行字距特别大或特别小" 行长不是字号整数倍 + 两端对齐 重算 width = 字号 × 字数
"破折号断成两截" 用了两个 — 但没设禁止分开 InDesign 加入"不可分割"集 / CSS 加 &#8288;
"上一行就一个字带个句号" 孤字成行 挤进前行 / 末行均排 / 改写删字
"页眉就一行（前段末行）" 孤行成页 调整前页 / 删字 / 加字
"直排里数字躺倒了" 没用 tate-chu-yoko 2-3 位数字用纵中横排；4 位以上整体旋转

Reference 文件（按条件读，1–3 个最相关的）

触发条件 读这个文件 文件里讲什么
标题/封面/海报/PPT/小红书标题需要人工断行 reference/title-and-breaking.md 标题断句、占行、正文断行、不可分离禁则、孤行孤字
长文/报告/公众号/公文/出版物、标点密集、破折号/省略号/引号/书名号问题 reference/punctuation.md 避头尾、标点风格、加法/减法模式、破折号、省略号、行内挤压/拉伸
字号/行距/字距/段落/文本灰度/屏幕阅读舒适度诊断 reference/text-detail.md 字号、字重、字距、行距、段落缩进、Ruby 注音、文本灰度
字体选择、展示字体、品牌字体、标题字体、正式报告字体、可加载字体测试 reference/fonts.md § 一 选字体(气质→表)→ § 二 加载执行；不要从本文件直接选字体
复杂版面/长文报告/PDF/画册/分栏/版心/模数/栅格 reference/grid-system.md 模数、版心、网格、栏宽、CLReq 关键数值（Web/H5/deck 只借模数和阅读逻辑）
直排/混排/诗词/古籍/邀请函/传统中文/地区排版差异 reference/directions.md 横排/直排/混排、装订方向、CSS writing-mode、地区风格差异
Reference in new issue View Git Blame Copy Permalink