dfmsolutions/AOS
1
0 Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Browse Source 
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
This commit is contained in:
Z User committed 2026-10-27 22:50:50 +00:00
1 parent 7acc0c5451
commit e45b68bb8b
1089 files changed
+260614
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

skills/design/horizontal-craft/reference/directions.md
Executable
+277
View File
@@ -0,0 +1,277 @@
# 排版方向 Text Direction：横排 / 直排 / 混排
中文是世界上少数能**横竖两套排版系统并行**的文字。"用什么方向"是任何中文排版项目的第一个决策，而不是默认横排。本文给出方向决策树、参数对照、CSS 实现、地区风格差异。
## 一、方向决策树
```
内容主要属性是什么？
│
├─ 古籍 / 文言 / 诗词 / 书法集 / 题词 / 对联 ────────────→ 直排
├─ 邀请函 / 请柬 / 礼仪文书 / 书信复古 ──────────────→ 直排
├─ 博物馆图录 / 艺术画册中"诗题画跋"页 ────────────→ 直排
├─ 杂志 / 报纸 / 教材 / 学术论文 / 商务文档 ───────→ 横排
├─ 现代小说 / 散文 / 网页 / H5 / App ───────────────→ 横排
└─ 工具书 / 字典 / 辞海 ───────────────────────→ 横排（直排版多见于民国老版本）
需不需要混排？
│
├─ 直排中遇 1 字英文/缩略词 ────→ 正立排（保持横向单字）
├─ 直排中遇 2-3 位阿拉伯数字 ───→ 纵中横排 tate-chu-yoko（保持横向小组）
├─ 直排中遇整段西文/词组 ───────→ 顺时针 90° 旋转
├─ 直排中遇竖排小注 ──────────→ 双行夹注（注文两行平行，字号 1/2）
├─ 横排中遇直排标题/匾额 ──────→ 局部 writing-mode: vertical-rl
└─ 横排中遇直排小段诗词引文 ───→ 局部直排（"插秧式"）
```
## 二、横排 vs 直排参数对照
| 维度 | 横排 | 直排 |
|---|---|---|
| 文字方向 | 左 → 右 | 上 → 下 |
| 行方向 | 上 → 下 | **右 → 左** |
| 翻页方向 | 从左向右翻（**左侧装订**） | 从右向左翻（**右侧装订**） |
| 正面页位置 | 右页（奇数页） | 左页（奇数页） |
| 分栏方向 | 垂直切分（左中右栏） | 水平切分（上中下栏） |
| 图/表标题位置 | 上方 / 下方 | 左侧 / 右侧 |
| 表头行位置 | 上方 | 右侧 |
| 表头列位置 | 左侧 | 上方 |
| 末页多栏行数 | 各栏尽量对齐，余空在末栏末尾 | 顺其结束，各栏行数可不齐 |
| 行长上限 | ≤ 48 字 | ≤ 55 字 |
| 行长下限 | ≥ 10 字 | ≥ 10 字 |
| CSS writing-mode | `horizontal-tb`（默认） | `vertical-rl` |
## 三、标点在横/直排中的差异（大陆 GB/T 15834-2011）
**关键差异点。错配会让版面瞬间显业余。**
| 标点 | 横排（大陆） | 直排（大陆） | 港台 |
|---|---|---|---|
| 句号 。 | 字面左下角 | 字面右上角 | 字面正中 |
| 逗号 ， | 字面左下角 | 字面右上角 | 字面正中 |
| 顿号 、 | 字面左下角 | 字面右上角 | 字面正中 |
| 冒号 ： | 字面左下角，直立 | **直立偏右**（不转 90°） | 居中直立 |
| 分号 ； | 字面左下角，直立 | **直立偏右**（不转 90°） | 居中直立 |
| 问号 ？ | 字面左下角，直立 | **直立**（不转 90°） | 居中直立 |
| 叹号 ！ | 字面左下角，直立 | **直立**（不转 90°） | 居中直立 |
| 引号（双） | 弯引号 " " | **直角引号 「」**（双） | 直角引号 |
| 引号（单） | 弯引号 ' ' | 直角引号 『』 | 直角引号 |
| 书名号 | 《》〈〉 | 《》（直立） | 甲式波浪 ﹏（台湾）/ 乙式《》 |
| 破折号 | —— 占 2 字水平居中 | **占 2 字垂直居中** | 同 |
| 省略号 | …… 占 2 字，6 点水平居中 | 占 2 字，6 点**垂直居中** | 同 |
**反例（要避免）**：
- 把日文规则套用到中文直排：冒号、分号、问号、叹号在日文直排转 90° 躺倒；**中文必须保持直立**。某代 macOS 因 Unicode UAX#50 早期不完善曾把中文比照日文，是错误案例。
- 直排正文用弯引号 " "（应改用直角「」）。
## 四、直排中混排西文的 3 种方法（W3C CLReq §2.1.3）
直排文本中遇到西文/数字时，根据长度选用：
### 方法 1：正立排（Upright）
- 用于：**单个字母、首字母缩略词**（如 GDP、CPU、A）
- 做法：用与汉字等宽的字体或全角字符，与汉字同方向逐字排
- CSS：`text-orientation: upright`
- 示例：`一个 G D P 增速…` （G、D、P 各占一格，与汉字同方向）
### 方法 2：顺时针 90° 旋转（Rotated）
- 用于：**一般单词 / 句子 / 4 位以上数字**（如 "JavaScript"、"2024"、"the quick brown fox"）
- 做法：用比例字体，整词整句旋转
- 汉字与西文之间间距 **≤ 1/4 汉字宽**；西文位于行首/行尾时**不加空白**
- CSS：`text-orientation: sideways`（即默认行为）
### 方法 3：纵中横排（Tate-chu-yoko 縦中横）
- 用于：**2–3 位阿拉伯数字、短缩写**（如 "3.0"、"A+"、"2B"、"21"、"AM"、"99"）
- 做法：比例字体，保持正方向横置；宽度与行幅相当或稍出
- 活字时代严格不超过 1 个汉字宽；现今可凸出行间
- CSS：`text-combine-upright: all`
- 示例：年龄 `21` 岁、`3.0` 升发动机、温度 `25` ℃
### 混排间距规则（直排同横排）
- 直排中**通常不用弯引号**（应改用直角引号）
- 若引用西文且用弯引号，需跟随被引文旋转
- 直排中阿拉伯数字内部不可分行，破折号/省略号不可分行
## 五、横排中嵌入直排
现代横排文档中嵌入小段直排的场景：
- 标题 / 匾额 / 题字
- 古诗引文（一首七绝直排展示，强化古意）
- 对联（两幅竖排平行展示）
- 印章、闲章、款识
- 杂志专题"穿插式"页面
**CSS 实现**：
```css
.vertical-quote {
writing-mode: vertical-rl; /* 直排：从右向左 */
text-orientation: mixed; /* 汉字直立，西文转横 */
height: 20em;
margin: 0 1em;
}
```
**注意事项**：
- 直排段在横排里要"做容器"——给定明确高度，不要让它自由撑开
- 直排标点要切换到右上角形态；不要直接搬横排标点
- 嵌入位置遵守"文意停顿"——句间嵌入而非词间
## 六、装订与翻页方向
装订方向直接影响版心位置和阅读体验，不能搞反。
| 方向 | 装订侧 | 翻页方向 | 第一页（正面）位置 | 用途 |
|---|---|---|---|---|
| **横排左翻** | 左侧 | 从左向右 | **右页**（奇数页） | 现代中文书、教材、报告、所有英文书 |
| **直排右翻** | 右侧 | 从右向左 | **左页**（奇数页） | 古籍、文言、诗集、传统书法集 |
| **直排左翻（错的）** | 左侧 | 从左向右 | — | 中日韩三国都不用 |
**关键检查项**：
- 大标题必须出现在**正面页**（横排右页 / 直排左页），不能开在反面页
- 章节末页留出余白时，留白方向匹配阅读方向（横排留下方、直排留下方）
- 跨页大图：横排左页向右延展、直排右页向左延展
## 七、CSS writing-mode 完整指南
```css
/* 横排（默认） */
.horizontal {
writing-mode: horizontal-tb; /* horizontal, top-to-bottom */
}
/* 直排（中文、日文、传统蒙文） */
.vertical {
writing-mode: vertical-rl; /* vertical, right-to-left lines */
text-orientation: mixed; /* 汉字立、半角西文转 90° */
}
/* 直排但行从左向右（少见，部分新蒙文） */
.vertical-lr {
writing-mode: vertical-lr;
}
/* 直排内单字符强制立起来（缩略词、单字母） */
.upright {
text-orientation: upright;
}
/* 纵中横排（数字小组保持横置） */
.tcy {
text-combine-upright: all;
}
```
完整 HTML 示例：
```html
<article style="writing-mode: vertical-rl; height: 30em;">
<p>
秦时明月汉时关，万里长征人未还。
但使<span style="text-combine-upright: all;">21</span>世纪有李广，
不教胡马度阴山。
</p>
</article>
```
## 八、地区风格三大体系
地区差异的索引表——一个项目锁定一个地区，按下面维度逐项对齐。具体执行细节看对应文件：标点详见 `punctuation.md`、字体详见 `fonts.md`、避头尾详见 `punctuation.md § 四`。
| 维度 | 大陆简体 | 港台繁体 | 日文 |
|---|---|---|---|
| 标点位置 | **横排左下、直排右上** | **居中**（横直排都一样） | 横排左下、直排右上（同大陆） |
| 避头尾严格度 | GB 级 / strict 级 | 多不严格（标点居中无突兀） | 严格 |
| 标点风格 | 开明式（句末全宽、句内半宽）多 | 居中式 + 多不调宽度 | 开明式 + 严格挤压 |
| 直排冒号分号 | 直立偏右 | 居中直立 | **转 90° 躺倒** |
| 引号 | 弯引号 ""''（横）/ 直角「」（直） | 直角「」『』（先单后双） | 直角「」 |
| 书名号 | 《》〈〉 | 甲式波浪 ﹏（书底）+ 乙式《》 | 二重括号 『』 |
| 间隔号 · | 占**半字宽** | 占**全字宽** | 占全字宽 |
| 公文字体 | **仿宋** | **楷体** | 明朝体 |
**核心心法**：项目开始就锁定地区风格，不要"中港台日"混用。
## 九、什么时候直排？什么时候横排？
### 必须直排
- 古籍影印 / 古籍今译保留原貌
- 文言文学校教材（部分台湾教材）
- 中医典籍、佛经、道经
- 书法作品集、字帖
- 传统戏曲剧本（旧版）
- 朱批奏折、家书复刻
### 强烈推荐直排
- 当代古典诗词集
- 茶艺 / 香道 / 国画相关书籍
- 高端艺术画册"诗题画跋"页
- 邀请函 / 请柬 / 谢卡（小段）
- 博物馆图录的部分内页（混合）
- 题字 / 题词 / 闲章
### 可以选直排（增加古意 / 仪式感）
- 散文集封面
- 招贴海报标题
- 茶包装、白酒包装文案
- 婚礼喜帖
- 复古风咖啡店菜单
### 不要直排
- 现代长文（用户已习惯横向扫视）
- 表格密集的文档（直排表格难做）
- 大量中英混排的技术 / 学术内容
- 网页正文（写读不便、生态差）
- App / H5（小屏直排压力大）
## 十、混排（横直交叉）的进阶玩法
不要把"混排"理解为"破格"——这是中文排版的基础语法。常见 5 种：
### 1. 横排正文 + 直排引文
正文横排，引用的古诗、对联、题词单段直排，与正文形成节奏对比。
```html
<article class="horizontal-body">
<p>李白《静夜思》写道：</p>
<blockquote class="vertical-quote">
床前明月光，疑是地上霜。<br>
举头望明月，低头思故乡。
</blockquote>
<p>这首诗体现了…</p>
</article>
```
### 2. 直排正文 + 横排数据
古籍今译类，正文直排，但年表、数据表、地图说明等横排。靠纸张/底色区分。
### 3. 跨页"半横半直"
左页直排（古文原文）、右页横排（今译），翻页对照。常见于古籍今译。
### 4. 标题直排、正文横排
封面 / 章首页用直排大字标题，营造仪式感；内页正文回到横排实用。
### 5. 双行夹注（小注）
直排正文中插入双行夹注：两行小注同高，字号为正文 1/2，平行排列。古籍标配。
```
正┃ 双行夹注：
文┃ 上行注┃下行注
正┃ 上行注┃下行注
文┃
```
## 十一、检查清单（方向相关）
排印完成前必过：
- [ ] 排版方向（横 / 直 / 混）是否与内容气质匹配？
- [ ] 装订方向是否与排版方向对应？（横左翻 / 直右翻）
- [ ] 大标题是否在正面页（横右页 / 直左页）？
- [ ] 直排中数字是否用了纵中横排？
- [ ] 直排中单字英文是否用了正立排？
- [ ] 直排标点是否切换到右上角形态？
- [ ] 直排冒号分号是否保持直立（没躺成日式）？
- [ ] 直排引号是否改用了直角「」？
- [ ] 地区风格是否一致？（没把港台居中标点 + 大陆 GB 避头尾混用）
- [ ] 横排嵌直排的段落是否给了明确高度？
- [ ] 图表标题方向是否匹配主排版方向？
- [ ] CSS `writing-mode` 和 `text-orientation` 是否成对设置？
skills/design/horizontal-craft/reference/fonts.md
Executable
+627
View File
@@ -0,0 +1,627 @@
# 字体选择与搭配 Chinese Font Selection
> 本文件是场景化中文字体选择、搭配与加载参考。不要在每个中文排版任务中默认读取；只有当字体会显著影响视觉方向，或需要命名字体 / 可加载字体测试时读取。
本文件按"选字体的实际顺序"组织：**一、选字体（决策线，从头读到尾选完）→ 二、加载执行（选完才需要）→ 三、原则自检（最后对照）**。
不要跳着读字体表；先在 § 一 按气质定位，再到 § 二 取加载方式。
## 一、选字体（决策线）
不要先浏览所有字体表，也不要为了“好看”直接挑一个刺激的字体名。先把用户意图归类，再按媒介、字体角色、加载可用性筛选，最后只进入匹配的字体库表。
### 1.1 用户意图 → 场景类别
| 用户意图 / 关键词 | 场景类别 | 进入字体库 |
|---|---|---|
| SaaS / Dashboard / 产品页 / 科技 / 商务 / 工业 / 硬朗 / 效率 | 现代 / 工业 / 科技 / 商务 | 表 A |
| 文学 / 古典 / 文化 / 新中式 / 感性 / 编辑 / 出版 / 杂志 | 文学 / 古典 / 优雅 / 感性 | 表 B |
| 古籍 / 文言 / 诗词 / 引文 / 对话 / 传统文化 / 楷书气质 | 古籍 / 文言 / 引文 / 对话文 | 表 C |
| 公文 / 党政机关 / 通知 / 制度文件 / 红头文件 | 公文 / 规范（大陆） | 表 D |
| 台湾公文 / 台湾教科书 / 繁体正式 / 楷書教育 | 公文 / 教科书（台湾） | 表 E |
| 学术 / 论文 / 白皮书 / 研究报告 / 严谨 / 可信 | 学术 / 严谨 / 出版 | 表 F |
| 小红书封面 / 海报 / 活动页 / 标语 / 主视觉 / 大字号 | 标题 / 海报 / 大字号 | 表 G |
如果一个需求同时命中多个类别，先按**产物主目的**选主类别：
- 产品/UI 可用性优先 → 表 A；
- 阅读与出版感优先 → 表 B / F；
- 固定图片封面冲击力优先 → 表 G；
- 正式规范优先 → 表 D / E。
### 1.2 字体筛选
进入字体库表后，不要直接选字体名。按下面 4 个条件筛掉不合适的字体。
| 筛选维度 | 判断问题 | 选择原则 |
|---|---|---|
| **交付媒介** | 是 Web/HTML、固定图片、长文、Dashboard，还是公文？ | Web 优先 `A:CDN` / `B:OSS切片`；固定图片可更强；长文和 Dashboard 优先可读；公文按规范。 |
| **字体角色** | 这套字体用于正文、标题、展示字、引文、数字，还是 UI 控件？ | 正文重可读；标题重气质；展示字只用于短标题/标语；UI 控件优先稳定屏幕字体。 |
| **加载可用性** | 字体是否真的能在 HTML 中加载？ | `A:CDN` 可直接用；`B:OSS切片` 用 `@font-face`；`C:仅参考` 不能直接写进 `font-family`。 |
| **内容密度** | 字数多、信息密，还是短标题/海报？ | 密内容用稳字体；短标题才允许强展示字体。 |
快速筛选规则：
- **Web / HTML 输出**：优先 `A:CDN` 或 `B:OSS切片`；`C:仅参考` 不要直接写进 `font-family`。
- **社媒图 / 海报 / 固定图片输出**：可以使用强展示字体，但仍需要可加载方案、用户提供字体文件，或明确它只是视觉气质参考。
- **长文 / 报告 / 公众号**：正文优先高可读字体；强展示字体最多用于标题、栏目名、引文或关键数字。
- **Dashboard / 表单 / 后台 / 工具页**：优先系统字体栈、思源黑、MiSans 等屏幕字体；不要用强展示字体做 UI 正文。
- **公文 / 正式材料**：优先用户或机构规范；不要用海报字体“增强设计感”。
### 1.3 字体库表
字体库表只放字体本身的信息：字体名、字重、用途提示、加载方式。OSS/CDN/OSS切片状态也在这里体现，不要在场景路由表里重复展开。
“加载”列含义：
- `A:CDN` = 公共 CDN 可达，`<link>` 直接引（见 § 6）。
- `B:OSS切片` = 当前已上传OSS切片，按 § 1.2/§ 1.4 写 `@font-face`。
- `C:仅参考` = 无公共加载方案，仅作气质参考；确定方向后改用本类同气质 A/B 字体，或由用户提供字体文件。
- `系统` = 系统字体（如 PingFang/macOS），无需加载但不跨平台保证。
以下字体库表只在场景命中后读取，不要跨场景扫表。
### 表 A：现代 / 工业 / 科技 / 商务
**关键词**：现代 · 工业 · 科技 · 商务 · 硬朗 · 效率 · 中性 · 极简 · UI · SaaS · Dashboard · 产品页
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 思源黑体 Source Han Sans | 7（ExtraLight–Heavy） | 屏幕通用首选，可正文可标题 | A:CDN |
| MiSans 小米兰亭 | 7（Thin–Heavy） | 屏幕、移动 UI、Dashboard；字怀稍开 | A:CDN |
| PingFang 苹方 | 6 | macOS/iOS 系统首选 | 系统 |
| HarmonyOS Sans | 9 | 鸿蒙生态；字重最丰富之一；有 OSS 切片可加载 | B:OSS |
| 阿里巴巴普惠体 | 5 | 商务、阿里系产品；有 OSS 切片可加载 | B:OSS |
| OPPO Sans | 5 | 移动端、ColorOS 生态；有 OSS 切片可加载 | B:OSS |
| BIZ UD Gothic | 2 | 日系气质；⚠ CJK 以 JIS 为主，简体部分字符 fallback | A:CDN |
| 方正兰亭黑（家族） | 6+ | 出版排版经典选择 | C:仅参考 |
| 汉仪旗黑 | 12 | 字重最丰富，商业项目 | C:仅参考 |
| 创客贴金刚体 | 1 | 强工业感标题；有 OSS 切片可加载 | B:OSS |
| 字体传奇特战体 | 1 | 极强工业/锐角，仅标题 | B:OSS切片 |
| 站酷酷黑 | 1 | 硬朗标题 | B:OSS切片 |
| 标小智无界黑 | 1 | 现代/无界感标题；有 OSS 切片可加载 | B:OSS |
**提示**：工业/科技不等于一律超黑粗体；信息密度高时强字体只用于主标题或关键数字。故障、特战类强烈改变气质，适合海报/发布页，不适合后台和长文。
### 表 B：文学 / 古典 / 优雅 / 感性
**关键词**：文学 · 古典 · 优雅 · 感性 · 文化 · 新中式 · 情绪 · 抒情 · 编辑 · 出版 · 杂志
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 思源宋体 Source Han Serif | 6 | 通用稳妥首选，可正文可标题 | A:CDN |
| BIZ UD Mincho | 2 | 现代明朝、易读性强；⚠ JIS 为主、简体部分字符 fallback | A:CDN |
| 方正书宋 | 多 | 经典书宋，温和 | C:仅参考 |
| 方正雅宋 / 准雅宋 | 多 | 现代宋代表 | C:仅参考 |
| 汉仪玄宋 | 5 | 偏现代，字面率小、留白多 | C:仅参考 |
| 汉仪书宋 | 多 | 经典书宋 | C:仅参考 |
| 霞鹜致宋 | 1 | 文化气质标题 | B:OSS切片 |
| 飞花宋体 / 一点明体 / 京华老宋体 | 1 | 文学气质标题；飞花宋体、一点明体有 OSS 切片，京华老宋体仅参考 | B:OSS切片 / C:仅参考 |
| 瀞之故障明朝 | 1 | 故障感文学标题 | C:仅参考 |
| 新愚公沧桑体 | 1 | 沧桑/感性文学标题；有 OSS 切片可加载 | B:OSS |
| ORADANO 明朝体 | 1 | 古典明朝感标题；有 OSS 切片可加载 | B:OSS |
**提示**：这类字体适合建立气韵，不适合密集 UI 和数据系统。文化感不能只靠字体——同时控制字距、行高、段落灰度。
### 表 C：古籍 / 文言 / 引文 / 对话文
**关键词**：古籍 · 文言 · 诗词 · 引文 · 对话 · 剧本 · 书卷 · 传统文化 · 楷书气质
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 霞鹜文楷 LXGW WenKai | 3 | 现代书卷感（清刻本风），古籍今译/文言/教科书 | A:CDN |
| 寒蝉正楷体 | 1 | 楷体引文 | B:OSS切片 |
| 演示春风楷 | 1 | 装饰性楷体标题 | B:OSS切片 |
| 初夏明朝体 / 源流明体 | 多字重 | 明朝体文学标题/引文 | B:OSS切片 |
| 润植家如印奏章楷 | 1 | 古意标题 | C:仅参考 |
| 梦源宋体 | 多 | 现代宋体替代 | C:仅参考 |
| 江西拙楷 | 1 | 拙朴楷体 | B:OSS切片 |
| 仓耳今楷 | 多 | 严谨可读楷体，教育/儿童 | C:仅参考 |
| Kaiti SC（macOS） | 1 | 系统楷，标题、引文 | 系统 |
| 方正楷体 GBK | 1 | 大陆常见楷，标题/引文 | C:仅参考 |
**提示**：楷、明、仿宋类适合营造文气，但不要默认用于长篇屏幕正文。对话文优先保证人名、冒号、引号和行距清楚。古籍/文言场景同时检查标点、断句、直排/横排和字距。
### 表 D：公文 / 规范（大陆）
**关键词**：公文 · 党政机关 · 通知 · 制度文件 · 正式规范 · 红头文件
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 方正小标宋简体 | 1 | 公文一级标题 | C:仅参考 |
| 仿宋 GB2312 | 1 | 公文正文（16pt） | C:仅参考 |
| 黑体（系统/方正） | 多 | 公文小标题（16pt） | 系统/C |
| 楷体 GB2312 | 1 | 公文签发说明（16pt） | C:仅参考 |
**提示**：公文场景不要自由发挥；优先遵守用户或机构提供的格式规范。公文字体方案不要迁移到普通网页、海报或产品 UI。
### 表 E：公文 / 教科书（台湾）
**关键词**：台湾公文 · 台湾教科书 · 繁体正式 · 楷書教育
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 中文采楷書 | 1 | 台湾公文/教材标准 | C:仅参考 |
| 华康楷体 | 多 | 台湾公文/教科书 | C:仅参考 |
| 文鼎楷体 | 多 | 同上 | C:仅参考 |
| 文鼎 PMingLiu 明朝体 | 1 | 繁体经典正文 | 系统 |
**提示**：台湾公文/教科书不要套用大陆公文的仿宋方案。双语材料注意中文楷书与西文（如 Times New Roman）的行高、基线和字号协调。
### 表 F：学术 / 严谨 / 出版
**关键词**：学术 · 严谨 · 论文 · 白皮书 · 研究报告 · 出版 · 正式 · 可信
**通用稳妥搭配**：思源宋体（正文）+ 思源黑体（标题），或 方正书宋 + 方正兰亭黑。
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 思源宋体 | 6 | 正文首选 | A:CDN |
| 思源黑体 | 7 | 标题首选 | A:CDN |
| 狮尾四季春 | 多字重 | 学术、严谨、出版标题；繁中/宋体气质 | B:OSS切片 |
| 思源赢宋 | 1 | 学术报告标题；有 OSS 切片可加载 | B:OSS |
| 朱雀仿宋 | 1 | 仿宋正文（特定语境） | B:OSS切片 |
| 字体圈欣意吉祥宋 | 1 | 严谨宋体 | B:OSS切片 |
**提示**：严谨场景优先可读性和可信度，不使用过强装饰字。仿宋适合公文/制度/正式文本气质，不要滥用于现代产品页正文。
### 表 G：标题 / 海报 / 大字号
**关键词**：标题 · 海报 · 封面 · 主视觉 · 标语 · 小红书封面 · 活动页 · 大字号 · 显眼
| 字体 | 字重数 | 用途/提示 | 加载 |
|---|---|---|---|
| 得意黑 Smiley Sans | 1 | 倾斜现代标题 | A:CDN |
| 钉钉进步体 | 1 | 现代品牌标题 | A:CDN / B:OSS切片 |
| 抖音美好体 DouyinSans | 1 | 抖音生态、活泼现代；有 OSS 切片可加载 | B:OSS |
| 阿里妈妈数黑体 | 1 | 营销标题、强冲击 | B:OSS切片 |
| 思源黑体 Heavy | 1 | 通用稳妥重标题 | A:CDN |
| 庞门正道标题体 | 1 | 标语、口号；有 OSS 切片可加载 | B:OSS |
| 文悦古典明朝 | 1 | 古风/复古标题 | C:仅参考 |
| 汉仪铸字尚黑 / 悦圆 | 多 | 现代品牌 | C:仅参考 |
| 优设标题黑 | 1 | 通用标题 | B:OSS切片 |
| 追光斗鱼体 / 一品启航体 / 快看世界体 | 1 | 强气质标题；一品启航体、快看世界体有 OSS 切片，追光斗鱼体仅参考 | B:OSS切片 / C:仅参考 |
| 字魂扁桃体 / 仓迹高德国妙黑 / Leefont 蒙黑体 | 1 | 装饰性标题；均有 OSS 切片 | B:OSS切片 |
| 淘宝买菜体 / 汤宪滨宋 / 荆南俊俊体 | 1 | 强气质标题；荆南俊俊体有 OSS 切片，淘宝买菜体/汤宪滨宋仅参考 | B:OSS切片 / C:仅参考 |
**提示**：标题/海报字体可以更强，但必须服务主题，不要只为"显眼"。小红书、海报、活动页可以用；B2B SaaS、后台、研究报告慎用。标题很长时优先处理断行和层级，再决定是否用强展示字体。
### 1.4 家族搭配范式（选完气质字体后，定正文+标题搭配）
### 范式 A：单家族，多字重（极简，推荐入门）
- 思源黑体 Light（正文）
- 思源黑体 Medium（小标题）
- 思源黑体 Bold（大标题）
### 范式 B：宋 + 黑 经典搭配
- 思源宋体 Regular（正文）
- 思源黑体 Medium（标题、图注、CTA 按钮）
### 范式 C：标题大字宋，正文黑（出版风）
- 方正准雅宋 Bold（大标题）
- 方正兰亭黑 Light（正文）
### 范式 D：同家族多字重 + 共同模数
- 方正兰亭准黑 GBK 12pt（小标题）
- 方正兰亭纤黑 GBK 9pt（正文）
- 方正细黑一 GBK 6pt（图注）
- 同模数（1.5pt）下三个字号通过家族字重协同
### 范式 E：宋 + 楷（古典 / 文学）
- 方正书宋 Regular 10.5pt（正文）
- 霞鹜文楷 Medium 14pt（标题、引文）
- 适合：古诗集、文学随笔、传统文化项目
### 范式 F：大陆公文专用方案
- 方正小标宋简体（标题候选）
- 仿宋 GB2312（16pt，正文候选）
- 黑体（16pt，层级/小标题候选）
- 楷体 GB2312（16pt，特定说明/签发类文本候选）
- 只用于大陆公文、通知、制度等正式文书，不迁移到普通网页/海报/UI。
### 范式 G：台湾公文 / 教科书专用方案
- 中文采楷書（中文正文/教材候选）
- Times New Roman（西文候选）
- 注意中文楷书与西文衬线的基线、行高和字号协调。
### 1.5 中英文混排
中英混排时，目标不是“谁排在 font-family 第一”，而是：
- 中文标点、破折号、省略号不能被西文字体接管；
- 英文单词、数字可以有更好的 Latin 字体表现；
- 行高、基线和视觉重量要协调。
| 中文字体 | 可搭配西文 | 备注 |
|---|---|---|
| 思源黑体 | Source Sans Pro / Inter | 技术、SaaS、报告 |
| PingFang | San Francisco | macOS / iOS 原生匹配 |
| MiSans | MiSans Latin | 同家族，行高匹配好 |
| HarmonyOS Sans | HarmonyOS Sans Latin | 同家族 |
| 思源宋体 | Source Serif Pro | 报告、编辑、出版感 |
| 方正书宋 | Times / Georgia | 经典宋 + 经典衬线 |
| 微软雅黑 | Segoe UI | Windows 环境 |
| 霞鹜文楷 | Crimson Pro | 文楷 + 现代衬线 |
| 方正仿宋 | EB Garamond / Crimson | 公文/古典感 |
#### 安全默认：中文字体在前
通用中文页面、H5、卡片和报告正文，默认用中文字体在前，保护中文标点：
```css
font-family: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC",
"Microsoft YaHei UI", "Microsoft YaHei",
system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
```
#### 需要 Latin 优先时，不要直接把 Inter 放到 body 第一位
如果把 `Inter`、`Helvetica` 放到 body 第一位，破折号、引号、省略号等共享码位字符可能被西文字体抢走，导致下沉、断开或视觉不一致。
更稳的做法：
```css
@font-face {
font-family: "Inter Local";
src: local("Inter");
unicode-range: U+0000-007F;
}
body {
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
.latin {
font-family: "Inter Local", Inter, system-ui, sans-serif;
}
```
也可以只对英文标题、数字、代码、标签使用 Latin class，不要让它接管中文正文标点。
### 1.6 可变字体（Variable Font）
新一代字体支持轴向调节，适合屏幕：
- 思源黑体 Variable（GitHub）
- 鸿蒙 HarmonyOS Sans Variable
- **MiSans VF**（小米官网，权重轴）
- Inter Variable
CSS：
```css
font-family: "Source Han Sans VF";
font-variation-settings: "wght" 450;
```
变体字重让设计响应屏幕尺寸（小屏用粗，大屏用细）。
## 二、加载执行（选定字体后）
### 2.1 三种加载情境，分清楚再写
| 字体类型 | 加载方式 | 示例 |
|---|---|---|
| **A. 公共 CDN 可达** | 直接 `<link>` 引 CDN（Google Fonts / jsDelivr 等自带子集化机制，浏览器自动按需下载） | 思源黑/宋、Noto SC、霞鹜文楷、得意黑、Source Sans 3 等 |
| **B. OSS 切片 / 自托管切片** | 用生成 CSS 的 `@font-face` 引 woff2 切片 + `unicode-range`；`ext` 兜底放最后 | 当前已上传 OSS 切片的展示字体、找不到公共 CDN 但有自托管切片的字体 |
| **C. 完全无加载方案** | 不要写进 `font-family`——仅用作气质参考 | § 2 候选清单中未标 `✓可加载`、且 § 6 无 CDN/无OSS切片的字体 |
### 2.2 B 类OSS切片：标准方案
当前 OSS 切片字体采用 **高频优先 CSS**：先加载高频汉字切片，再加载标点、拉丁，最后用扩展切片兜底。
参考 CSS 结构：
```text
@font-face common-hi → 高频汉字，使用精确 unicode-range 列表
@font-face punct → CJK 符号 + 通用标点 + 全角 ASCII
@font-face latin → 基本拉丁 + 拉丁补充 + 常用标点
@font-face ext → 兜底剩余字符，放最后
```
切片说明：
| 切片名 | 推荐写法 | 覆盖 |
|---|---|---|
| `common-hi` | 使用生成 CSS 里的精确高频汉字 `unicode-range`，不要简化成整段 `U+4E00-9FFF` | 高频/常用中文，优先用于标题、封面和常见正文测试 |
| `punct` | `U+3000-303F, U+2000-206F, U+FF00-FFEF` | CJK 符号标点、通用标点、全角 ASCII |
| `latin` | `U+0020-007E, U+00A0-00FF, U+2010-2027` | 基本拉丁、拉丁补充、常用标点 |
| `ext` | `U+0-10FFFF`，必须放在最后 | 兜底剩余字符，含低频汉字、生僻字和未覆盖字符 |
为什么 `common-hi` 不直接写 `U+4E00-9FFF`：
- `U+4E00-9FFF` 会让 common 切片承担整个 CJK 统一汉字区，失去“高频优先”的意义。
- 生成 CSS 里的 `common-hi` 已经把常用 2500 汉字压成精确范围，浏览器只在页面出现这些字时下载高频切片。
- 低频字交给最后的 `ext` 兜底，避免首屏强行加载过大的完整中文切片。
**当前OSS 切片链接**：直接使用 § 1.4 的已上传 URL，不再套 `{oss-host}` 占位。
**Paste-ready `@font-face` 模板**（从 § 1.4 复制某个字体/字重的 4 个 URL；`common-hi` 的 `unicode-range` 从对应生成 CSS 复制）：
```css
/* 高频汉字：不要简化为 U+4E00-9FFF；复制生成 CSS 里的精确范围 */
@font-face {
font-family: "{字体显示名}";
src: url("{common-hi-url}") format("woff2");
unicode-range:
/* paste generated common-hi unicode-range here */;
font-display: swap;
}
/* CJK 符号 + 通用标点 + 全角 ASCII */
@font-face {
font-family: "{字体显示名}";
src: url("{punct-url}") format("woff2");
unicode-range: U+3000-303F, U+2000-206F, U+FF00-FFEF;
font-display: swap;
}
/* 基本拉丁 + 拉丁补充 + 常用标点 */
@font-face {
font-family: "{字体显示名}";
src: url("{latin-url}") format("woff2");
unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027;
font-display: swap;
}
/* 兜底：剩余字符。必须放最后 */
@font-face {
font-family: "{字体显示名}";
src: url("{ext-url}") format("woff2");
unicode-range: U+0-10FFFF;
font-display: swap;
}
```
使用注意：
- `common-hi`、`punct`、`latin`、`ext` 的顺序不要乱；`ext` 必须最后。
- 如果没有对应字体的生成 CSS，临时预览可以用 § 1.4 的 URL + 简化范围，但不能当成正式加载方案。
- 若用户只做短标题/社媒卡片，通常只会命中 `common-hi`、`punct`、少量 `latin`；长文和生僻字才会触发 `ext`。
- 生产环境仍需确认授权、缓存策略、CORS、文件体积和实际命中字符。
**机制说明**：浏览器根据页面实际字符与 `unicode-range` 匹配下载字体切片。高频汉字先命中 `common-hi`，标点命中 `punct`，英文/数字命中 `latin`，其余字符由最后的 `ext` 兜底。
### 2.3 当前已上传 OSS 字体切片 URL 表
本节是字体加载查表，放在 `fonts.md` 内，避免运行时再跳到第三个文件。
使用顺序：
1. 先按 § 2 完成“用户意图 → 场景类别 → 字体筛选”。
2. 如果选中 `B:OSS切片` 字体，再回到本节查对应 `font-family`、`font-weight` 和 4 个切片 URL。
3. 把 URL 填入 § 1.2 的 `@font-face` 模板。
4. 多字重家族必须写 `font-weight`，不要把所有切片都声明成 `normal`。
5. `common-hi` 的精确 `unicode-range` 仍应从对应生成 CSS 复制；没有生成 CSS 时只能临时测试。
不要从本节直接挑字体。本节只负责“已选字体如何加载”。
#### 字体家族概要
| font_examples | css_family | font_weights | scene | count |
| --- | --- | --- | --- | --- |
| 寒蝉正楷体 | `"ChillKai"` | 400 | 古籍 / 文言 / 引文 / 对话文 | 1 |
| 演示春风楷 | `"Slide Chunfeng Kai"` | 400 | 古籍 / 文言 / 引文 / 对话文，楷体标题 | 1 |
| 江西拙楷 | `"Jiangxi ZhuoKai"` | 400 | 古籍 / 文言 / 拙朴楷体 | 1 |
| 朱雀仿宋 | `"Zhuque Fangsong"` | 400 | 学术 / 严谨 / 仿宋语境 | 1 |
| 思源赢宋 | `"CorpSrcWinSong Slim"` | 400 | 学术 / 严谨 / 出版标题 | 1 |
| 阿里巴巴普惠体 | `"Alibaba PuHuiTi 3.0"` | 400 | 现代 / 商务 / 阿里系 | https://fileup.chatglm.cn/chatglm-operation/AlibabaPuHuiTi-3-55-Regular/file/a0/a055f93b5d | https://fileup.chatglm.cn/chatglm-operation/AlibabaPuHuiTi-3-55-Regular/file/89/8988f0ce3a | https://fileup.chatglm.cn/chatglm-operation/AlibabaPuHuiTi-3-55-Regular/file/54/54bcd7c6b7 | https://fileup.chatglm.cn/chatglm-operation/AlibabaPuHuiTi-3-55-Regular/file/98/98f1a2b7c1 | upload batch 3 |
| 抖音美好体 DouyinSans | `"Douyin Sans"` | 400 | 标题 / 海报 / 活泼现代 | https://fileup.chatglm.cn/chatglm-operation/DouyinMeiHaoTi/file/30/30da93e844 | https://fileup.chatglm.cn/chatglm-operation/DouyinMeiHaoTi/file/3b/3b171d2f15 | https://fileup.chatglm.cn/chatglm-operation/DouyinMeiHaoTi/file/a3/a380b67b0f | https://fileup.chatglm.cn/chatglm-operation/DouyinMeiHaoTi/file/44/449109fb5c | upload batch 3 |
| HarmonyOS Sans SC (Thin) | `"HarmonyOS Sans SC"` | 100 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Thin/file/00/00540c8656 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Thin/file/d1/d1f7d77c1e | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Thin/file/df/df02b19609 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Thin/file/37/37c8413537 | upload batch 3 |
| HarmonyOS Sans SC (Light) | `"HarmonyOS Sans SC"` | 300 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Light/file/29/29bf93d0c0 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Light/file/20/20282efc71 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Light/file/8e/8edf18df66 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Light/file/3c/3c72b5376c | upload batch 3 |
| HarmonyOS Sans SC (Regular) | `"HarmonyOS Sans SC"` | 400 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Regular/file/01/01c1e63b4b | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Regular/file/60/600b67ec1f | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Regular/file/01/01a87f4cf2 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Regular/file/b8/b864f26ac4 | upload batch 3 |
| HarmonyOS Sans SC (Medium) | `"HarmonyOS Sans SC"` | 500 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Medium/file/3a/3a02b63f25 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Medium/file/7c/7c75e18d44 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Medium/file/31/3147c5bf0e | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Medium/file/c7/c70bc7fcd3 | upload batch 3 |
| HarmonyOS Sans SC (Bold) | `"HarmonyOS Sans SC"` | 700 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Bold/file/7c/7cae48675b | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Bold/file/40/40cfd77cc2 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Bold/file/3f/3f31fa480d | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Bold/file/26/26a9ef75a3 | upload batch 3 |
| HarmonyOS Sans SC (Black) | `"HarmonyOS Sans SC"` | 900 | 现代 / 工业 / 科技 / 鸿蒙生态 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Black/file/24/246d346cc6 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Black/file/70/70dad93690 | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Black/file/5f/5f6a76369a | https://fileup.chatglm.cn/chatglm-operation/HarmonyOS_Sans_SC_Black/file/2f/2f83a1c310 | upload batch 3 |
| OPPO Sans (Regular) | `"OPPO Sans"` | 400 | 现代 / 移动端 / ColorOS | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Regular/file/43/43f018edfb | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Regular/file/2d/2dfba362f9 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Regular/file/d0/d075041026 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Regular/file/a2/a2375f3414 | upload batch 3 |
| OPPO Sans (Medium) | `"OPPO Sans"` | 500 | 现代 / 移动端 / ColorOS | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Medium/file/a0/a0eba90561 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Medium/file/7b/7b241f2dad | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Medium/file/b5/b55f3cb429 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Medium/file/e3/e3bf64883a | upload batch 3 |
| OPPO Sans (Bold) | `"OPPO Sans"` | 700 | 现代 / 移动端 / ColorOS | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Bold/file/49/496c8f2d63 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Bold/file/c3/c332d5e576 | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Bold/file/bf/bfeea08fdc | https://fileup.chatglm.cn/chatglm-operation/OPPOSans-Bold/file/e3/e36dd64024 | upload batch 3 |
| 狮尾四季春 Black / 狮尾四季春 Bold / 狮尾四季春 ExtraLight | `"Swei Spring CJK TC"` | 200, 700, 900 | 学术 / 严谨 / 出版，繁中/宋体标题 | 3 |
| 字体圈欣意吉祥宋 | `"XinYi JiXiang Song"` | 400 | 学术 / 严谨 / 宋体标题 | 1 |
| 初夏明朝体 Bold / 初夏明朝体 ExtraLight / 初夏明朝体 Heavy … | `"Early Summer Serif"` | 200, 300, 400, 500, 600, 700, 900 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | 7 |
| 狮尾四季春糖 ExtraLight / 狮尾四季春糖 Light / 狮尾四季春糖 Medium … | `"Swei Spring Sugar CJK TC"` | 200, 300, 400, 500 | 文学 / 古典 / 优雅 / 感性，柔和宋体 | 4 |
| 源流明体 Bold / 源流明体 ExtraLight / 源流明体 Heavy … | `"GenRyuMin JP"` | 200, 300, 400, 500, 600, 700, 900 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | 7 |
| ORADANO 明朝体 | `"ORADANO Mincho"` | 400 | 文学 / 古典 / 感性标题 | 1 |
| 新愚公沧桑体 | `"XinYuGong CangSang Ti"` | 400 | 文学 / 古典 / 感性标题 | 1 |
| 霞鹜致宋 | `"LXGW ZhiSong"` | 400 | 文学 / 古典 / 感性标题 | 1 |
| 飞花宋体 | `"Feihua Song"` | 400 | 文学 / 古典 / 感性标题 | 1 |
| 一点明体 | `"I.Ming"` | 400 | 文学 / 古典 / 明朝体标题 | 1 |
| 润植家康熙字典美化体 | `"RunZhiJia KangXi"` | 400 | 文学 / 古籍 / 传统标题 | 1 |
| 润植家康熙字典美化体 清瘦款 | `"RunZhiJia KangXi Slim"` | 400 | 文学 / 古籍 / 传统标题 | 1 |
| 一品启航体 | `"YiPin QiHang Ti"` | 400 | 标题 / 海报 | 1 |
| 快看世界体 | `"Kuaikan Shijie Ti"` | 400 | 标题 / 海报 / 年轻内容 | 1 |
| Leefont 蒙黑体 | `"Leefont MengHei"` | 400 | 标题 / 海报 / 强气质标题 | 1 |
| 仓迹高德国妙黑 | `"Cangji Gaode Guomiao Hei"` | 400 | 标题 / 海报 / 强气质标题 | 1 |
| 荆南俊俊体 | `"JingNan JunJunTi"` | 400 | 标题 / 海报 / 强气质标题 | 1 |
| 庞门正道标题体 | `"PangMenZhengDao Title"` | 400 | 标题 / 海报 / 标语口号 | 1 |
| 钉钉进步体 | `"DingTalk JinBuTi"` | 400 | 标题 / 海报 / 现代品牌 | 1 |
| 阿里妈妈数黑体 | `"Alimama ShuHeiTi"` | 400 | 标题 / 海报 / 营销 / 产品发布 | 1 |
| 字魂扁桃体 | `"ZiHun BianTao Ti"` | 400 | 标题 / 海报 / 装饰标题 | 1 |
| 优设标题黑 | `"YouShe Title Black"` | 400 | 标题 / 海报 / 通用重标题 | 1 |
| 字体传奇特战体 | `"ZiTiChuanQi TeZhan Ti"` | 400 | 现代 / 工业 / 特战锐角标题 | 1 |
| Blix Bold / Blix ExtraLight / Blix Light … | `"Blix"` | 100, 200, 300, 400, 500, 600, 700 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | 7 |
| Blix Text | `"Blix Text"` | 400 | 现代 / 工业 / 科技 / 商务，多字重正文/标题测试 | 1 |
| 乡立方黑体 | `"XiangLiFang HeiTi"` | 400 | 现代 / 工业 / 科技标题 | 1 |
| 创客贴金刚体 | `"Chuangkit KingKong"` | 400 | 现代 / 工业 / 科技标题 | 1 |
| 德拉黑体 | `"Dela Gothic One"` | 400 | 现代 / 工业 / 科技标题 | 1 |
| 标小智无界黑 | `"BiaoXiaoZhi WuJie Hei"` | 400 | 现代 / 工业 / 科技标题 | 1 |
| 站酷酷黑体 | `"ZCOOL KuHei"` | 400 | 现代 / 工业 / 科技标题 | 1 |
| Plix 普利士 Bold / Plix 普利士 ExtraLight / Plix 普利士 Light … | `"Plix"` | 100, 200, 300, 400, 500, 600, 700 | 现代 / 工业 / 科技，多字重标题/产品发布 | 7 |
| Plix 普利士 Text | `"Plix Text"` | 400 | 现代 / 工业 / 科技，多字重正文/标题测试 | 1 |
| 联盟起艺卢帅正锐黑体 | `"Lushuai Zhengrui Hei"` | 400 | 现代 / 工业 / 锐利标题 | 1 |
#### URL 查表
| font | css_family | font_weight | scene | common_hi | latin | punct | ext | source |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| ORADANO 明朝体 | `"ORADANO Mincho"` | 400 | 文学 / 古典 / 感性标题 | `https://fileup.chatglm.cn/chatglm-operation/OradanoGSRR/file/cf/cfca08647b` | `https://fileup.chatglm.cn/chatglm-operation/OradanoGSRR/file/96/9669e6fafc` | `https://fileup.chatglm.cn/chatglm-operation/OradanoGSRR/file/2e/2e080147a0` | `https://fileup.chatglm.cn/chatglm-operation/OradanoGSRR/file/77/7785a5869e` | previous fonts.md |
| 一品启航体 | `"YiPin QiHang Ti"` | 400 | 标题 / 海报 | `https://fileup.chatglm.cn/chatglm-operation/一品启航体/file/76/76e29dad38` | `https://fileup.chatglm.cn/chatglm-operation/一品启航体/file/55/55e3ca4732` | `https://fileup.chatglm.cn/chatglm-operation/一品启航体/file/be/be931f15f9` | `https://fileup.chatglm.cn/chatglm-operation/一品启航体/file/7f/7f1a985296` | previous fonts.md |
| 一点明体 | `"I.Ming"` | 400 | 文学 / 古典 / 明朝体标题 | `https://fileup.chatglm.cn/chatglm-operation/I.Ming-7.00/file/07/07ffdc1adc` | `https://fileup.chatglm.cn/chatglm-operation/I.Ming-7.00/file/f1/f1d05f12d2` | `https://fileup.chatglm.cn/chatglm-operation/I.Ming-7.00/file/0a/0a40bb960b` | `https://fileup.chatglm.cn/chatglm-operation/I.Ming-7.00/file/8a/8a0b4c63be` | previous fonts.md |
| 乡立方黑体 | `"XiangLiFang HeiTi"` | 400 | 现代 / 工业 / 科技标题 | `https://fileup.chatglm.cn/chatglm-operation/乡立方黑体/file/56/56aba77493` | `https://fileup.chatglm.cn/chatglm-operation/乡立方黑体/file/5a/5ab39ea07b` | `https://fileup.chatglm.cn/chatglm-operation/乡立方黑体/file/0c/0cff80e0d0` | `https://fileup.chatglm.cn/chatglm-operation/乡立方黑体/file/91/91c932c78e` | previous fonts.md |
| 字体传奇特战体 | `"ZiTiChuanQi TeZhan Ti"` | 400 | 现代 / 工业 / 特战锐角标题 | `https://fileup.chatglm.cn/chatglm-operation/字体传奇特战体/file/de/de9cb81c4c` | `https://fileup.chatglm.cn/chatglm-operation/字体传奇特战体/file/36/36f5e042e9` | `https://fileup.chatglm.cn/chatglm-operation/字体传奇特战体/file/65/651d795fc4` | `https://fileup.chatglm.cn/chatglm-operation/字体传奇特战体/file/11/11548cd4b7` | previous fonts.md |
| 字体圈欣意吉祥宋 | `"XinYi JiXiang Song"` | 400 | 学术 / 严谨 / 宋体标题 | `https://fileup.chatglm.cn/chatglm-operation/字体圈欣意吉祥宋/file/c9/c9dddef6e8` | `https://fileup.chatglm.cn/chatglm-operation/字体圈欣意吉祥宋/file/af/aff9039041` | `https://fileup.chatglm.cn/chatglm-operation/字体圈欣意吉祥宋/file/31/313d305e30` | `https://fileup.chatglm.cn/chatglm-operation/字体圈欣意吉祥宋/file/34/3486a908c2` | previous fonts.md |
| 字魂扁桃体 | `"ZiHun BianTao Ti"` | 400 | 标题 / 海报 / 装饰标题 | `https://fileup.chatglm.cn/chatglm-operation/字魂扁桃体/file/19/194181e6cb` | `https://fileup.chatglm.cn/chatglm-operation/字魂扁桃体/file/88/88cd111dd2` | `https://fileup.chatglm.cn/chatglm-operation/字魂扁桃体/file/01/01ccc9e7e1` | `https://fileup.chatglm.cn/chatglm-operation/字魂扁桃体/file/ca/caa5025441` | previous fonts.md |
| 寒蝉正楷体 | `"ChillKai"` | 400 | 古籍 / 文言 / 引文 / 对话文 | `https://fileup.chatglm.cn/chatglm-operation/ChillKai/file/eb/ebda4b10a4` | `https://fileup.chatglm.cn/chatglm-operation/ChillKai/file/44/440fb6ae60` | `https://fileup.chatglm.cn/chatglm-operation/ChillKai/file/9d/9dea0f4c28` | `https://fileup.chatglm.cn/chatglm-operation/ChillKai/file/c2/c2ee5f953f` | previous fonts.md |
| 庞门正道标题体 | `"PangMenZhengDao Title"` | 400 | 标题 / 海报 / 标语口号 | `https://fileup.chatglm.cn/chatglm-operation/PangMenZhengDaoBiaoTiTiMianFeiBan-2/file/5d/5d64a9bdcb` | `https://fileup.chatglm.cn/chatglm-operation/PangMenZhengDaoBiaoTiTiMianFeiBan-2/file/de/de6cbf790e` | `https://fileup.chatglm.cn/chatglm-operation/PangMenZhengDaoBiaoTiTiMianFeiBan-2/file/c4/c4600cb505` | `https://fileup.chatglm.cn/chatglm-operation/PangMenZhengDaoBiaoTiTiMianFeiBan-2/file/0b/0b92972246` | previous fonts.md |
| 德拉黑体 | `"Dela Gothic One"` | 400 | 现代 / 工业 / 科技标题 | `https://fileup.chatglm.cn/chatglm-operation/DelaGothicOne-Regular/file/18/1806c3702f` | `https://fileup.chatglm.cn/chatglm-operation/DelaGothicOne-Regular/file/79/79e72e7dc7` | `https://fileup.chatglm.cn/chatglm-operation/DelaGothicOne-Regular/file/01/011df6fd58` | `https://fileup.chatglm.cn/chatglm-operation/DelaGothicOne-Regular/file/e9/e9bc1db661` | previous fonts.md |
| 快看世界体 | `"Kuaikan Shijie Ti"` | 400 | 标题 / 海报 / 年轻内容 | `https://fileup.chatglm.cn/chatglm-operation/kuaikanshijieti/file/34/34f1113cd5` | `https://fileup.chatglm.cn/chatglm-operation/kuaikanshijieti/file/87/87aebfd38a` | `https://fileup.chatglm.cn/chatglm-operation/kuaikanshijieti/file/ed/ed4819ef67` | `https://fileup.chatglm.cn/chatglm-operation/kuaikanshijieti/file/19/190ff5cb5e` | previous fonts.md |
| 思源赢宋 | `"CorpSrcWinSong Slim"` | 400 | 学术 / 严谨 / 出版标题 | `https://fileup.chatglm.cn/chatglm-operation/CorpSrcWinSong-slim/file/2e/2e88d410e7` | `https://fileup.chatglm.cn/chatglm-operation/CorpSrcWinSong-slim/file/70/701fb6cf26` | `https://fileup.chatglm.cn/chatglm-operation/CorpSrcWinSong-slim/file/01/01d5854ec6` | `https://fileup.chatglm.cn/chatglm-operation/CorpSrcWinSong-slim/file/06/065e0e26bb` | previous fonts.md |
| 新愚公沧桑体 | `"XinYuGong CangSang Ti"` | 400 | 文学 / 古典 / 感性标题 | `https://fileup.chatglm.cn/chatglm-operation/新愚公沧桑体/file/4c/4cbdf91141` | `https://fileup.chatglm.cn/chatglm-operation/新愚公沧桑体/file/1b/1b9de889cf` | `https://fileup.chatglm.cn/chatglm-operation/新愚公沧桑体/file/d6/d67a6cf51b` | `https://fileup.chatglm.cn/chatglm-operation/新愚公沧桑体/file/df/dffb5f4b32` | previous fonts.md |
| 朱雀仿宋 | `"Zhuque Fangsong"` | 400 | 学术 / 严谨 / 仿宋语境 | `https://fileup.chatglm.cn/chatglm-operation/朱雀仿宋/file/73/739649f27b` | `https://fileup.chatglm.cn/chatglm-operation/朱雀仿宋/file/8b/8b0607dcf5` | `https://fileup.chatglm.cn/chatglm-operation/朱雀仿宋/file/f9/f9508b25a5` | `https://fileup.chatglm.cn/chatglm-operation/朱雀仿宋/file/34/349ba93dfa` | previous fonts.md |
| 江西拙楷 | `"Jiangxi ZhuoKai"` | 400 | 古籍 / 文言 / 拙朴楷体 | `https://fileup.chatglm.cn/chatglm-operation/江西拙楷2.0/file/30/30489bcd64` | `https://fileup.chatglm.cn/chatglm-operation/江西拙楷2.0/file/a5/a5576e755f` | `https://fileup.chatglm.cn/chatglm-operation/江西拙楷2.0/file/42/42ca2970b1` | `https://fileup.chatglm.cn/chatglm-operation/江西拙楷2.0/file/dd/ddbe3161a0` | previous fonts.md |
| 润植家康熙字典美化体 | `"RunZhiJia KangXi"` | 400 | 文学 / 古籍 / 传统标题 | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体/file/fe/fe7aa424c4` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体/file/ee/ee8b8f834b` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体/file/5b/5bdb2beb2a` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体/file/60/60b82d3143` | previous fonts.md |
| 润植家康熙字典美化体 清瘦款 | `"RunZhiJia KangXi Slim"` | 400 | 文学 / 古籍 / 传统标题 | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体-清瘦款/file/20/2099cd5e83` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体-清瘦款/file/5c/5cfb8dbdf6` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体-清瘦款/file/39/3964fcafc8` | `https://fileup.chatglm.cn/chatglm-operation/润植家康熙字典美化体-清瘦款/file/e6/e6c2d94792` | previous fonts.md |
| 站酷酷黑体 | `"ZCOOL KuHei"` | 400 | 现代 / 工业 / 科技标题 | `https://fileup.chatglm.cn/chatglm-operation/站酷酷黑体/file/ea/eadd08db72` | `https://fileup.chatglm.cn/chatglm-operation/站酷酷黑体/file/13/13dd379397` | `https://fileup.chatglm.cn/chatglm-operation/站酷酷黑体/file/4b/4bde15434e` | `https://fileup.chatglm.cn/chatglm-operation/站酷酷黑体/file/80/80b5c54b0d` | previous fonts.md |
| 联盟起艺卢帅正锐黑体 | `"Lushuai Zhengrui Hei"` | 400 | 现代 / 工业 / 锐利标题 | `https://fileup.chatglm.cn/chatglm-operation/联盟起艺卢帅正锐黑体/file/4f/4f37900ffc` | `https://fileup.chatglm.cn/chatglm-operation/联盟起艺卢帅正锐黑体/file/98/9840da1aeb` | `https://fileup.chatglm.cn/chatglm-operation/联盟起艺卢帅正锐黑体/file/70/70a1db7c91` | `https://fileup.chatglm.cn/chatglm-operation/联盟起艺卢帅正锐黑体/file/c2/c2af99b3fc` | previous fonts.md |
| 荆南俊俊体 | `"JingNan JunJunTi"` | 400 | 标题 / 海报 / 强气质标题 | `https://fileup.chatglm.cn/chatglm-operation/JingNanJunJunTi-JinNanJunJunTi-Bold-2/file/cb/cbb8549ae0` | `https://fileup.chatglm.cn/chatglm-operation/JingNanJunJunTi-JinNanJunJunTi-Bold-2/file/ab/abd1273106` | `https://fileup.chatglm.cn/chatglm-operation/JingNanJunJunTi-JinNanJunJunTi-Bold-2/file/f1/f13c84fb94` | `https://fileup.chatglm.cn/chatglm-operation/JingNanJunJunTi-JinNanJunJunTi-Bold-2/file/44/44a4205932` | previous fonts.md |
| 钉钉进步体 | `"DingTalk JinBuTi"` | 400 | 标题 / 海报 / 现代品牌 | `https://fileup.chatglm.cn/chatglm-operation/DingTalkJinBuTi-Regular/file/f7/f76dac6937` | `https://fileup.chatglm.cn/chatglm-operation/DingTalkJinBuTi-Regular/file/56/565cc41a96` | `https://fileup.chatglm.cn/chatglm-operation/DingTalkJinBuTi-Regular/file/ef/ef81576a19` | `https://fileup.chatglm.cn/chatglm-operation/DingTalkJinBuTi-Regular/file/84/84e1509a2c` | previous fonts.md |
| 阿里妈妈数黑体 | `"Alimama ShuHeiTi"` | 400 | 标题 / 海报 / 营销 / 产品发布 | `https://fileup.chatglm.cn/chatglm-operation/AlimamaShuHeiTi-Bold/file/cb/cbfb7e4458` | `https://fileup.chatglm.cn/chatglm-operation/AlimamaShuHeiTi-Bold/file/61/61711255c2` | `https://fileup.chatglm.cn/chatglm-operation/AlimamaShuHeiTi-Bold/file/9b/9b1d007c76` | `https://fileup.chatglm.cn/chatglm-operation/AlimamaShuHeiTi-Bold/file/c5/c51379dac8` | previous fonts.md |
| 飞花宋体 | `"Feihua Song"` | 400 | 文学 / 古典 / 感性标题 | `https://fileup.chatglm.cn/chatglm-operation/飞花宋体/file/f0/f0e72eccf3` | `https://fileup.chatglm.cn/chatglm-operation/飞花宋体/file/5b/5b11746893` | `https://fileup.chatglm.cn/chatglm-operation/飞花宋体/file/d2/d21c0e3479` | `https://fileup.chatglm.cn/chatglm-operation/飞花宋体/file/ea/ea8ab8cd6f` | previous fonts.md |
| Blix Bold | `"Blix"` | 700 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Bold/file/26/262abdf55d` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Bold/file/04/041fe34200` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Bold/file/a2/a249ce7687` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Bold/file/ae/aec610d95c` | fonts_upload_result2.csv |
| Blix ExtraLight | `"Blix"` | 200 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-ExtraLight/file/21/2193185438` | `https://fileup.chatglm.cn/chatglm-operation/Blix-ExtraLight/file/45/45edc00a9b` | `https://fileup.chatglm.cn/chatglm-operation/Blix-ExtraLight/file/9c/9cfecb9691` | `https://fileup.chatglm.cn/chatglm-operation/Blix-ExtraLight/file/ff/ffe53dfa43` | fonts_upload_result2.csv |
| Blix Light | `"Blix"` | 300 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Light/file/3f/3f0d54a8cb` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Light/file/f0/f04181a3ef` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Light/file/35/35033b633c` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Light/file/56/563ddfdb03` | fonts_upload_result2.csv |
| Blix Medium | `"Blix"` | 500 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Medium/file/2d/2de1e9a8ba` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Medium/file/b1/b1309f5393` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Medium/file/b7/b73c9a408a` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Medium/file/38/38887b9641` | fonts_upload_result2.csv |
| Blix Regular | `"Blix"` | 400 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Regular/file/5c/5cba7280ac` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Regular/file/26/26225968c9` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Regular/file/07/074ef94072` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Regular/file/29/299afaba9c` | fonts_upload_result2.csv |
| Blix SemiBold | `"Blix"` | 600 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-SemiBold/file/5e/5efb6f641f` | `https://fileup.chatglm.cn/chatglm-operation/Blix-SemiBold/file/dc/dc8a790bd9` | `https://fileup.chatglm.cn/chatglm-operation/Blix-SemiBold/file/2c/2c84409bd6` | `https://fileup.chatglm.cn/chatglm-operation/Blix-SemiBold/file/88/8851c60de7` | fonts_upload_result2.csv |
| Blix Text | `"Blix Text"` | 400 | 现代 / 工业 / 科技 / 商务，多字重正文/标题测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Text/file/0e/0e4aa0cd41` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Text/file/4a/4a4b2170ed` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Text/file/cd/cd0c4f3f0e` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Text/file/ed/ed3abc7940` | fonts_upload_result2.csv |
| Blix Thin | `"Blix"` | 100 | 现代 / 工业 / 科技 / 商务，多字重标题/界面测试 | `https://fileup.chatglm.cn/chatglm-operation/Blix-Thin/file/c5/c576803cdd` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Thin/file/66/665334cd4c` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Thin/file/ba/bad1b25e87` | `https://fileup.chatglm.cn/chatglm-operation/Blix-Thin/file/83/833afaf19e` | fonts_upload_result2.csv |
| 初夏明朝体 Bold | `"Early Summer Serif"` | 700 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Bold/file/9e/9e7a93c0d4` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Bold/file/ad/adfab8bd66` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Bold/file/1d/1d690160e4` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Bold/file/24/241fb12f1b` | fonts_upload_result2.csv |
| 初夏明朝体 ExtraLight | `"Early Summer Serif"` | 200 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-ExtraLight/file/cb/cb9f3dbb30` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-ExtraLight/file/11/1126df09ff` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-ExtraLight/file/a1/a15fd9a2be` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-ExtraLight/file/df/dfc81e40b7` | fonts_upload_result2.csv |
| 初夏明朝体 Heavy | `"Early Summer Serif"` | 900 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Heavy/file/bc/bcbd45c849` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Heavy/file/5a/5a7f10c952` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Heavy/file/2a/2a4268ce41` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Heavy/file/28/28f748319f` | fonts_upload_result2.csv |
| 初夏明朝体 Light | `"Early Summer Serif"` | 300 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Light/file/6d/6d80ac384b` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Light/file/81/81278898c7` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Light/file/19/19c59b5e10` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Light/file/f2/f254f3ee53` | fonts_upload_result2.csv |
| 初夏明朝体 Medium | `"Early Summer Serif"` | 500 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Medium/file/2d/2dd6de2b01` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Medium/file/60/60ada71088` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Medium/file/82/822f64e64e` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Medium/file/73/7335b8f693` | fonts_upload_result2.csv |
| 初夏明朝体 Regular | `"Early Summer Serif"` | 400 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Regular/file/ff/ff27654498` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Regular/file/36/36d455145e` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Regular/file/cf/cf9bea1ab5` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-Regular/file/90/9088bd3069` | fonts_upload_result2.csv |
| 初夏明朝体 SemiBold | `"Early Summer Serif"` | 600 | 文学 / 古典 / 优雅 / 感性，明朝体标题/短文 | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-SemiBold/file/63/6378c94799` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-SemiBold/file/8e/8eb81f0cd1` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-SemiBold/file/20/20aca09499` | `https://fileup.chatglm.cn/chatglm-operation/EarlySummerSerif-SemiBold/file/a1/a12ddfa661` | fonts_upload_result2.csv |
| 源流明体 Bold | `"GenRyuMin JP"` | 700 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Bold-2/file/c4/c4fca8acfc` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Bold-2/file/fd/fd97bd3c57` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Bold-2/file/ac/acb00d888a` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Bold-2/file/30/303e02361e` | fonts_upload_result2.csv |
| 源流明体 ExtraLight | `"GenRyuMin JP"` | 200 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-ExtraLight-3/file/8d/8d28bc4d1a` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-ExtraLight-3/file/58/586b40f864` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-ExtraLight-3/file/35/357938f213` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-ExtraLight-3/file/9c/9ca7d004e4` | fonts_upload_result2.csv |
| 源流明体 Heavy | `"GenRyuMin JP"` | 900 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Heavy-4/file/42/42ee49d982` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Heavy-4/file/5b/5bade94110` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Heavy-4/file/e4/e4a56d24bb` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Heavy-4/file/57/573abe53c5` | fonts_upload_result2.csv |
| 源流明体 Light | `"GenRyuMin JP"` | 300 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Light-5/file/7b/7b804e9f2e` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Light-5/file/a3/a3a78821ad` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Light-5/file/32/32bce1ed1e` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Light-5/file/b2/b22d1d9ad0` | fonts_upload_result2.csv |
| 源流明体 Medium | `"GenRyuMin JP"` | 500 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Medium-6/file/00/00d40483a8` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Medium-6/file/9e/9e7ed7bb98` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Medium-6/file/de/de1074fa56` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Medium-6/file/32/32863e2ca5` | fonts_upload_result2.csv |
| 源流明体 Regular | `"GenRyuMin JP"` | 400 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Regular-7/file/06/0615f8acbd` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Regular-7/file/11/11f8f60de4` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Regular-7/file/ee/ee6452c6e8` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-Regular-7/file/6c/6c84952724` | fonts_upload_result2.csv |
| 源流明体 SemiBold | `"GenRyuMin JP"` | 600 | 文学 / 古典 / 引文 / 明朝体；日系/传统气质 | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-SemiBold-8/file/fa/faa4062b63` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-SemiBold-8/file/c8/c8ad6ba144` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-SemiBold-8/file/2a/2a2430a174` | `https://fileup.chatglm.cn/chatglm-operation/GenRyuMinJP-SemiBold-8/file/86/862003923c` | fonts_upload_result2.csv |
| Leefont 蒙黑体 | `"Leefont MengHei"` | 400 | 标题 / 海报 / 强气质标题 | `https://fileup.chatglm.cn/chatglm-operation/Leefont蒙黑体/file/44/44fa456e39` | `https://fileup.chatglm.cn/chatglm-operation/Leefont蒙黑体/file/43/43d9dac7ed` | `https://fileup.chatglm.cn/chatglm-operation/Leefont蒙黑体/file/86/86d7fc1b56` | `https://fileup.chatglm.cn/chatglm-operation/Leefont蒙黑体/file/f1/f1bccaa444` | fonts_upload_result2.csv |
| Plix 普利士 Bold | `"Plix"` | 700 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Bold/file/20/20ab9b228b` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Bold/file/ff/ff5ad6c35c` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Bold/file/7f/7f266e9ab8` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Bold/file/72/72ea6eba65` | fonts_upload_result2.csv |
| Plix 普利士 ExtraLight | `"Plix"` | 200 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-ExtraLight/file/44/44ea3ad18c` | `https://fileup.chatglm.cn/chatglm-operation/Plix-ExtraLight/file/de/de382861e8` | `https://fileup.chatglm.cn/chatglm-operation/Plix-ExtraLight/file/4f/4f33b32eab` | `https://fileup.chatglm.cn/chatglm-operation/Plix-ExtraLight/file/25/253ac4035a` | fonts_upload_result2.csv |
| Plix 普利士 Light | `"Plix"` | 300 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Light/file/0a/0a41f59145` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Light/file/56/56ca45cd72` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Light/file/9e/9e0d314ed6` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Light/file/32/32fc493bde` | fonts_upload_result2.csv |
| Plix 普利士 Medium | `"Plix"` | 500 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Medium/file/99/99735c84dd` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Medium/file/f2/f2062f9763` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Medium/file/08/084584f23a` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Medium/file/3e/3e7d5e1613` | fonts_upload_result2.csv |
| Plix 普利士 Regular | `"Plix"` | 400 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Regular/file/30/30e51f7096` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Regular/file/bd/bd02f2a6aa` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Regular/file/4a/4a12aff53e` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Regular/file/36/36e4af189f` | fonts_upload_result2.csv |
| Plix 普利士 SemiBold | `"Plix"` | 600 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-SemiBold/file/53/534febe072` | `https://fileup.chatglm.cn/chatglm-operation/Plix-SemiBold/file/95/95c63a7834` | `https://fileup.chatglm.cn/chatglm-operation/Plix-SemiBold/file/9c/9c42ed77cb` | `https://fileup.chatglm.cn/chatglm-operation/Plix-SemiBold/file/70/706b68a842` | fonts_upload_result2.csv |
| Plix 普利士 Text | `"Plix Text"` | 400 | 现代 / 工业 / 科技，多字重正文/标题测试 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Text/file/f5/f5cae38ed5` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Text/file/be/bebc157f30` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Text/file/bc/bc36d5dc10` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Text/file/f1/f1a08dd5ab` | fonts_upload_result2.csv |
| Plix 普利士 Thin | `"Plix"` | 100 | 现代 / 工业 / 科技，多字重标题/产品发布 | `https://fileup.chatglm.cn/chatglm-operation/Plix-Thin/file/f5/f5b452a7e5` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Thin/file/27/27d434dbf5` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Thin/file/88/887ee1fc9c` | `https://fileup.chatglm.cn/chatglm-operation/Plix-Thin/file/b6/b6c12b4ab2` | fonts_upload_result2.csv |
| 演示春风楷 | `"Slide Chunfeng Kai"` | 400 | 古籍 / 文言 / 引文 / 对话文，楷体标题 | `https://fileup.chatglm.cn/chatglm-operation/Slidechunfeng-Regular/file/e7/e7a2a98669` | `https://fileup.chatglm.cn/chatglm-operation/Slidechunfeng-Regular/file/7e/7e76141d49` | `https://fileup.chatglm.cn/chatglm-operation/Slidechunfeng-Regular/file/95/95292e23a0` | `https://fileup.chatglm.cn/chatglm-operation/Slidechunfeng-Regular/file/c5/c5aaf20d76` | fonts_upload_result2.csv |
| 狮尾四季春 Black | `"Swei Spring CJK TC"` | 900 | 学术 / 严谨 / 出版，繁中/宋体标题 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Black/file/74/745f6a117b` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Black/file/b5/b59271fb3a` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Black/file/c0/c0798484ce` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Black/file/2e/2ec18b32e7` | fonts_upload_result2.csv |
| 狮尾四季春 Bold | `"Swei Spring CJK TC"` | 700 | 学术 / 严谨 / 出版，繁中/宋体标题 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Bold/file/2c/2c1e22d582` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Bold/file/f8/f81c815d41` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Bold/file/8f/8fbc87b012` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-Bold/file/46/46bdb3bcac` | fonts_upload_result2.csv |
| 狮尾四季春 ExtraLight | `"Swei Spring CJK TC"` | 200 | 学术 / 严谨 / 出版，繁中/宋体标题 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-ExtraLight/file/ea/eae48f5558` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-ExtraLight/file/34/342b7933b1` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-ExtraLight/file/3f/3f04f2cef8` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringCJKtc-ExtraLight/file/c9/c97f798620` | fonts_upload_result2.csv |
| 狮尾四季春糖 ExtraLight | `"Swei Spring Sugar CJK TC"` | 200 | 文学 / 古典 / 优雅 / 感性，柔和宋体 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-ExtraLight/file/9e/9e740cfb8a` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-ExtraLight/file/7f/7ff7baed53` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-ExtraLight/file/e7/e72980f785` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-ExtraLight/file/2e/2e43afce54` | fonts_upload_result2.csv |
| 狮尾四季春糖 Light | `"Swei Spring Sugar CJK TC"` | 300 | 文学 / 古典 / 优雅 / 感性，柔和宋体 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Light/file/fb/fb2ea95fbd` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Light/file/48/480090eeb1` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Light/file/37/37aa2e72a7` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Light/file/4e/4ef78056ed` | fonts_upload_result2.csv |
| 狮尾四季春糖 Medium | `"Swei Spring Sugar CJK TC"` | 500 | 文学 / 古典 / 优雅 / 感性，柔和宋体 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Medium/file/ff/ffc7d6cc4e` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Medium/file/c7/c7e930b33f` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Medium/file/4d/4d33bd4f85` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Medium/file/09/09c3f1e9ac` | fonts_upload_result2.csv |
| 狮尾四季春糖 Regular | `"Swei Spring Sugar CJK TC"` | 400 | 文学 / 古典 / 优雅 / 感性，柔和宋体 | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Regular/file/9b/9b45083ab4` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Regular/file/d1/d121306867` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Regular/file/00/002363c227` | `https://fileup.chatglm.cn/chatglm-operation/SweiSpringSugarCJKtc-Regular/file/a6/a6a6836ee9` | fonts_upload_result2.csv |
| 霞鹜致宋 | `"LXGW ZhiSong"` | 400 | 文学 / 古典 / 感性标题 | `https://fileup.chatglm.cn/chatglm-operation/xiawuzhisong/file/e3/e3ef8f1238` | `https://fileup.chatglm.cn/chatglm-operation/xiawuzhisong/file/c3/c3ffb778a6` | `https://fileup.chatglm.cn/chatglm-operation/xiawuzhisong/file/a9/a99e73508a` | `https://fileup.chatglm.cn/chatglm-operation/xiawuzhisong/file/94/94ba9251ce` | fonts_upload_result2.csv |
| 仓迹高德国妙黑 | `"Cangji Gaode Guomiao Hei"` | 400 | 标题 / 海报 / 强气质标题 | `https://fileup.chatglm.cn/chatglm-operation/仓迹高德国妙黑/file/54/546b95a0d0` | `https://fileup.chatglm.cn/chatglm-operation/仓迹高德国妙黑/file/7f/7f2986f888` | `https://fileup.chatglm.cn/chatglm-operation/仓迹高德国妙黑/file/74/748bbd6371` | `https://fileup.chatglm.cn/chatglm-operation/仓迹高德国妙黑/file/3f/3f52c4766f` | fonts_upload_result2.csv |
| 优设标题黑 | `"YouShe Title Black"` | 400 | 标题 / 海报 / 通用重标题 | `https://fileup.chatglm.cn/chatglm-operation/优设标题黑/file/24/24ecaa8f59` | `https://fileup.chatglm.cn/chatglm-operation/优设标题黑/file/93/930ab5a2bf` | `https://fileup.chatglm.cn/chatglm-operation/优设标题黑/file/87/8794e267e0` | `https://fileup.chatglm.cn/chatglm-operation/优设标题黑/file/90/90eab1b431` | fonts_upload_result2.csv |
| 创客贴金刚体 | `"Chuangkit KingKong"` | 400 | 现代 / 工业 / 科技标题 | `https://fileup.chatglm.cn/chatglm-operation/创客贴金刚体/file/95/95d2df8fbd` | `https://fileup.chatglm.cn/chatglm-operation/创客贴金刚体/file/fd/fd1829b5f1` | `https://fileup.chatglm.cn/chatglm-operation/创客贴金刚体/file/0f/0f474674d1` | `https://fileup.chatglm.cn/chatglm-operation/创客贴金刚体/file/1e/1ed6b8865c` | fonts_upload_result2.csv |
| 标小智无界黑 | `"BiaoXiaoZhi WuJie Hei"` | 400 | 现代 / 工业 / 科技标题 | `https://fileup.chatglm.cn/chatglm-operation/标小智无界黑/file/3c/3c8fed3f61` | `https://fileup.chatglm.cn/chatglm-operation/标小智无界黑/file/17/173c9801ef` | `https://fileup.chatglm.cn/chatglm-operation/标小智无界黑/file/7b/7b7b634392` | `https://fileup.chatglm.cn/chatglm-operation/标小智无界黑/file/14/1419fd9c1b` | fonts_upload_result2.csv |
### 2.4 备查：CDN / 系统字体加载方式
> 关键规则：在 `font-family` 里写了命名字体，就必须同时加载它（用 `<link>` 引 CDN，或用 `@font-face` 自托管）。
> 只写名字不加载 = 没用，浏览器会 fallback 成默认字体。拿不准就优先 A 类有公共 CDN 的字体。
#### 中文字体
| 字体 | 类型 | 加载方式 |
|---|---|---|
| 思源黑体 Source Han Sans SC | 黑 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-sans-sc-vf/font.css`；也可走自托管切片 → 见 § 1 |
| 思源宋体 Source Han Serif SC | 宋 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-serif-sc-vf/font.css`；也可走自托管切片 → 见 § 1 |
| Noto Sans SC | 黑 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-sans-sc-vf/font.css`（国内 jsDelivr，思源黑同源；原 Google：`Noto+Sans+SC`） |
| Noto Serif SC | 宋 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-source-han-serif-sc-vf/font.css`（国内 jsDelivr，思源宋同源；原 Google：`Noto+Serif+SC`） |
| 霞鹜文楷 LXGW WenKai | 楷 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-screen-r/font.css`（国内 jsDelivr；原 Google：`fonts.googleapis.com/css2?family=LXGW+WenKai`） |
| 得意黑 Smiley Sans | 标题/黑 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-smiley-sans-oblique-regular/font.css` |
| 钉钉进步体 | 标题/黑 | A：`https://cdn.jsdelivr.net/npm/cn-fontsource-ding-talk-jin-bu-ti-regular/font.css`；B：OSS 切片 → 见 § 1.4 |
| BIZ UDGothic / UDMincho | 黑/宋（日文为主，简体部分字符会 fallback） | A：`https://fonts.googleapis.com/css2?family=BIZ+UDGothic`（或 `BIZ+UDMincho`）（Google CDN，国内加载可能慢；日文为主的边缘字体，按需使用） |
| MiSans | 黑 | A：`https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css`（按字重换 Medium/Bold） |
| HarmonyOS Sans | 黑 | B:OSS；切片见 § 2.3（Thin–Black 全字重）|
| 阿里巴巴普惠体 | 黑 | B:OSS；切片见 § 2.3 |
| OPPO Sans | 黑 | B:OSS；切片见 § 2.3（Regular/Medium/Bold）|
| 抖音美好体 DouyinSans | 标题/黑 | B:OSS；切片见 § 2.3 |
| 阿里妈妈数黑体 | 标题/黑 | B：OSS 切片 → 见 § 1.4 |
| 其他已上传测试字体 | 标题/宋/楷/仿宋 | 见 § 1.4；仅用于标题、封面、海报、社媒卡片或特定测试，不默认用于正文 |
#### 拉丁/西文字体（中英混排时给 Latin 部分；比系统默认更有性格）
> 这些都不是系统字体，必须加载。**不要默认用 Inter**（AI 烂大街，见 `anti-ai-slop.md`）——优先下面这些。
| 字体 | 风格 | Web 加载 |
|---|---|---|
| Source Sans 3 | 无衬线，中性专业（思源黑的拉丁同源感） | `https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3/index.css`（国内 jsDelivr） |
| Source Serif 4 | 衬线，编辑/出版感（配思源宋） | `https://cdn.jsdelivr.net/npm/@fontsource/source-serif-4/index.css`（国内 jsDelivr） |
| Crimson Pro | 衬线，文学/优雅 | `https://cdn.jsdelivr.net/npm/@fontsource/crimson-pro/index.css`（国内 jsDelivr） |
| EB Garamond | 衬线，古典/书卷 | `https://cdn.jsdelivr.net/npm/@fontsource/eb-garamond/index.css`（国内 jsDelivr） |
### 2.5 组装 font-family 栈（选字和落 CSS 之间的最后一步，最容易出错）
选完字体后，写 `font-family` 时最常见的错误是**漏掉 CJK 字体那一环**——比如选了「Inter 英文 + 系统中文」，却写成
`font-family: 'Inter', system-ui, sans-serif`，中文直接跳到 system-ui，渲染不可控。
**硬规则：任何含中文的页面，`font-family` 里必须显式出现一个 CJK 字体名。Latin 字体后面绝不能直接接 `system-ui`。**
按"中英是否用不同字体"分两种，直接照模板填：
```css
/* 情形 A：中英用同一字体 / 不特别指定英文字体 → CJK 字体在最前 */
font-family: '{CJK字体}', system-ui, sans-serif;
/* 例： */
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
/* 情形 B：中英用不同字体（指定了 Latin display 字体）→ Latin 在前，但 CJK 必须紧跟 */
font-family: '{Latin字体}', '{CJK字体}', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
/* 例： */
font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
```
**反例（不要这样写）**：
```css
font-family: 'Inter', system-ui, sans-serif; /* ✗ 中文 fallback 到 system-ui，不可控 */
font-family: 'Helvetica', 'PingFang SC'; /* ✗ 英文在前会抢走中文标点(破折号/引号下沉) */
```
**和"中文排英文前"铁律的关系**（两种策略，别混）：
- **情形 A（同字体）**：CJK 在前——这就是"中文排英文前"，避免英文字体抢走中文标点字形。
- **情形 B（分字体）**：Latin 在前但 CJK 必须紧跟——靠浏览器按字符 fallback，Latin 字体只渲染它有的拉丁字符，中文落到紧跟的 CJK 字体。这种情形若担心标点被 Latin 抢走，用 `unicode-range` 把 Latin 限定在拉丁码位：
```css
@font-face {
font-family: "Inter Latin";
src: local("Inter");
unicode-range: U+0000-024F; /* 只渲染拉丁，标点/中文留给 CJK */
}
body { font-family: "Inter Latin", "Noto Sans SC", "PingFang SC", system-ui, sans-serif; }
```
标点下沉/破折号问题详见 `punctuation.md` 破折号专题。
## 三、原则自检（选完字体后对照检查）
### 3.1 字面率（Face Ratio）选择结论
- **字面率约 95%**（思源黑、Noto Sans CJK、HarmonyOS Sans、MiSans、阿里普惠体等）：屏幕首选——大字面率在小字号下仍清晰。
- **字面率约 85%**（思源宋、霞鹜文楷、传统宋/楷）：印刷、长文阅读、文学/古籍气质首选——视觉松弛、易长时间阅读。
- **不要混搭悬殊字面率的字体**（如 95% 黑体 + 85% 宋体）做同等级标题/正文，视觉重量会断。
### 3.2 通用搭配原则
- 一个项目 ≤ 2 个字体家族；优先一家族多字重，靠粗细和字号拉层级。
- 同一设计最多 1 个强展示字体；正文回到高可读字体。
- 标题/海报字体强但必须服务主题，不要只为"显眼"。
- 候选清单的顺序不是优先级；按内容气质、可读性、媒介选择。
### 3.3 绝对避免
正文/严肃内容禁用：
- ❌ 华文彩云、华文琥珀、华文行楷
- ❌ 任何带阴影/3D/塑料质感的"特效字体"
- ❌ 装饰性毛笔字体（如造字工房悦圆系列做正文）
- ❌ 游戏字体（暗黑、星际等）做长文
- ❌ 楷体做现代长文正文（**儿童读物 / 教育例外**）—— 楷体笔画细易疲劳
- ❌ 仿宋体做大段现代正文（**公文例外**）—— 同上
- ⚠️ 中易宋体、中易仿宋、旧版微软雅黑：破折号/省略号可能断开或下沉，Web 与长文场景需测试
- ⚠️ 华文黑体、部分兰亭黑版本：标点可能不居中；如用于出版/品牌项目需实测
标题/海报谨慎用：
- ⚠️ 卡通字体用于商务
- ⚠️ 书法字体用于科技
- ⚠️ 衬线字体（宋体）用于运动/动感主题
skills/design/horizontal-craft/reference/grid-system.md
Executable
+290
View File
@@ -0,0 +1,290 @@
# 汉字网格系统 详解
中文出版物"模数 → 网格 → 版心"方法论的完整展开。
## 一、核心概念
### 模数（Modulus / 倍率 / 系数）
一个数值，所有版面元素都是它的整数倍。让页面所有空间要素纳入统一比例。
- **默认推荐：1.5pt**（正文 9pt 体系）
- 正文 9pt = 6 × 1.5pt
- 图注 6pt = 4 × 1.5pt
- 小标题 12pt = 8 × 1.5pt
- 行距 18pt = 12 × 1.5pt
- 页边距以 9pt = 1 字 为单位
- **学术/严谨：1pt**（步进更细）
- **古典精装 / 多体例对齐：0.5pt**（极精细）
- **不要用 1.618pt / φ 比例做模数**——汉字定宽方格，小数位会让单元格宽算不齐
模数选择原则：**正文字号能被模数整除**，且模数能产生足够的字号梯度（不超过 12 级）。
### 字号体系
一个项目里所有字号都从同一个表里选。典型 9pt 模数 1.5pt 体系：
| 用途 | 字号 (pt) | 是模数的 ? 倍 |
|---|---|---|
| 主标题 / 章首字 | 18–24 | 12–16× |
| 章标题 | 15 | 10× |
| 节标题 | 12 | 8× |
| 正文 | 9 | 6× |
| 引文 / 副文 | 7.5 | 5× |
| 注释 / 图注 | 6 | 4× |
| 页眉 / 页码 | 6 | 4× |
字号之间的"跳跃"不应小于 1.5×（小于这个差视觉上分不出来）。
### 中国传统字号体系（号 / 级 / 点对照）
| 号 | pt | mm | 用途 |
|---|---|---|---|
| 初号 | 42 | 14.8 | 章首大字、大标题 |
| 一号 | 27.5–28 | 9.7–9.9 | 海报大标题 |
| 小一 | 24 | 8.5 | 大标题 |
| 二号 | 21–22 | 7.4–7.8 | 标题 |
| 小二 | 18 | 6.3 | 中标 |
| 三号 | 15.75–16 | 5.6 | **公文正文（GB/T 9704-2012：三号仿宋）** |
| 四号 | 13.75–14 | 4.9 | 副标题 |
| 小四 | 12 | 4.2 | 副文 |
| **五号** | **10.5** | **3.7** | **书籍正文（最常用）** |
| 小五 | 9 | 3.2 | 报刊正文 / 新五号 |
| 六号 | 7.875 | 2.8 | 图注 / **正文字号下限** |
| 七号 | 5.25 | 1.9 | 极小辅助文字 |
### 页面与版心
**核心公式：开本 = 正文字号 × 整数**
- 例：60 字宽 × 90 字高 × 9pt = **540 × 810pt = 190.5 × 285.75mm**
- 横纵比 = 2:3（费氏数列里的优美比）
- 印装预留：横宽各 +6pt，纵高上下各 +9pt → 成品 552 × 828pt
其他常用比：1:1 / 2:3 / 3:5 / 5:8 / 8:13（费氏数列）
## 二、版心标记法
这套记号让任意排版方案能被一行字精确描述。**学会这套记号能让你像建筑师一样思考版面。**
### 横排版心
```
L3 + [ W(9pt × 56) ] + R1 / O2 + { H(9pt × 83) } + U5
```
含义：
| 符号 | 含义 | 单位 |
|---|---|---|
| **L** | 订口（内侧）页边距 Left/back margin | 9pt 字数 |
| **R** | 切口（外侧）页边距 Right/fore-edge | 9pt 字数 |
| **O** | 天头（顶部）页边距 Top margin | 9pt 字数 |
| **U** | 地脚（底部）页边距 Bottom margin | 9pt 字数 |
| **W( )** | 版心宽 Width of type area，方括号 `[ ]` 包裹 | pt × 字数 |
| **H{ }** | 版心高 Height of type area，花括号 `{ }` 包裹 | pt × 字数 |
读法：订口空 3 个字、切口空 1 个字、天头空 2 个字、地脚空 5 个字；版心是 9pt × 56 字宽、9pt × 83 行高。
### 直排版心（标记略有不同）
直排时"宽" = 行数 × 字号、"高" = 每行字数 × 字号；订口在**右侧**（左页则在左侧）。
```
O5 + { H(10.5pt × 40) } + U8 / R3 + [ W(10.5pt × 25) ] + L13
↑ ↑
订口（右页右侧） 切口（左侧）
```
注意：直排时 L/R 角色调换 —— **L 仍指订口**（左页的左侧、右页的右侧），**R 仍指切口**。
### 典型版心方案（34 例精选）
页面均为 540×810pt（60×90 字）。
| 例 | 标记 | 用途 |
|---|---|---|
| V_1 | `L3+[W(9×56)]+R1 / O2+{H(9×83)}+U5` | 极致填满，工具书/字典 |
| V_12 | `L2+[W(9×53)]+R5 / O3+{H(9×79)}+U8` | 文学小说 |
| V_22 | `L5+[W(9×42)]+R13 / O8+{H(9×61)}+U21` | 大切口、可批注（教材/笔记书） |
| V_26 | `L5+[W(9×50)]+R5 / O13+{H(9×69)}+U8` | 顶天/对称，画册 |
| V_31 | `L3+[W(9×54)]+R3 / O5+{H(9×77)}+U8` | 通用学术，最常用 |
| V_32 | `L3+[W(9×54)]+R3 / O5+{H(9×77)}+U8` | 同上，配多体例 |
**规律**：
- 几乎都是 L < R 或 L+R 比 O+U 小（视觉重心略偏上）
- 边距数值都是费氏数列邻项（1, 2, 3, 5, 8, 13, 21）
## 三、分栏（Column）
版心内可再分栏。栏宽和栏间距都是模数整数倍。
- 1 栏：文学、散文
- 2 栏：杂志、学术论文、教材
- 3+ 栏：辞书、目录、新闻、数据手册
- 栏间距：**2 字宽**（如 9pt × 2 = 18pt）最常用，也可 1 字宽
每栏字数：
- 1 栏页面：17–40 字（W3C 推荐 17–40，硬上限 48）
- 2 栏页面：15–22 字
- 3 栏页面：12–18 字
## 四、为不同媒介换算模数
### 屏幕 / 网页
- 正文 16px → 模数 4px（16/4=4，太粗时取 2px）
- 字号梯度：12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px（都是 4 的倍数 + 偶数和谐）
- max-width：`30em` ≈ 480px @ 16px
- line-height：1.5–1.7
### PowerPoint / Keynote
- 4:3 画布 1024×768 → 用 64px 模数，16×12 格
- 16:9 画布 1920×1080 → 用 60px 模数，32×18 格
- 标题 40–60pt，正文 24–32pt，注释 14–18pt
### H5 / 移动 (375pt 设计稿)
- 模数 4pt，正文 14–16pt
- 行长建议 ≤ 18 字（375pt 宽减边距后 ~ 311pt / 18pt 字宽 = 17 字）
### 印刷书籍
- 32 开 (140×210mm) → 正文 9–10pt
- 16 开 (185×260mm) → 正文 9.5–11pt
- 8 开/画册 → 正文可 10–12pt（视距更远）
## 五、网格七要点
整套方法论最精炼的归纳：
1. **从哪里开始？** 从一个字开始，更确切是从组成这个字的模数开始。"汉字一字即一格"，1:1 是费氏数列黄金比第一项。
2. **页面尺寸 = 正文字号的整数倍**。如 60 字 × 90 字。
3. **页面尺寸 = 模数字号的整数倍**。1.5pt 模数下 540×810pt = 194,400 个单元格。
4. **由 1 到 ∞**：5400 个单元格可以选 1 字、2 字、N 字组合出页边距和版心；天头/订口/地脚/切口可按费氏比例（1:2:3:5）任选。
5. **感觉是设计的核心**：网格作为工具不能在感觉上提供帮助。"美比严格按网格排列重要"。
6. **用相同模数设计不同字号**：不同字号之间的比例关系来自共同模数。
7. **用模数设计行间距**：行间距必须是模数整数倍。同模数下，不同字号、不同行距的文本能行对齐（多语种对照、多体例对照）。
## 六、网格的实操规则（中文特有）
中文网格不只是"框文本"，必须细到行内字格；用 `em`/`rem` 表达一切尺寸，不用 px/mm。
### 6.1 工作流：先字号定版心，再余出边距
中文工作流是"先版心、后边距"，**不是西式"先边距、再版心"**：
```
1. 定字号（如 9pt）
2. 定每行字数（如 30 字）
3. 行长 = 字号 × 字数（9 × 30 = 270pt）
4. 定每页行数（如 28 行）
5. 定行距（如 18pt）
6. 版心高 = (28-1) × 18 + 9 = 495pt
7. 开本尺寸 - 版心 = 余白
8. 按 3:5:8:13 分配 L/R/O/U（左/右/外/内）
```
### 6.2 一切以"占字/占行"度量
| 元素 | 度量方式 |
|---|---|
| 首行缩进（书籍/公文/古典长文） | `text-indent: 2em` |
| 网页/卡片/UI 段落 | 通常不用首行缩进，顶格 |
| 栏间距 | 占 2 个字宽 |
| 一级标题占行 | 4–5 行（正文行高倍数） |
| 二级标题占行 | 2–3 行 |
| 三级标题占行 | 1–2 行 |
| 双行题目占行 | 3 行 |
| 人名/花名册 | 每名占 3 格，2 字名后补 1 格空 |
所有标题占行**必须是正文行高的整数倍**——这是"对行"的基本要求。
### 6.3 行内字格也要管
奇数个对开（半宽）标点产生半格余量时，两种做法（无绝对对错，但要清楚妥协方向）：
- **活字做法**：把半格余量加给那个标点 → 标点变全宽，行仍对齐网格
- **数码常用**：把半格均摊到全行字距 → 标点不变但整行偏离网格
### 6.4 严格网格之外允许"破格"
在网格内偶尔破格能让作品有上限突破，但**先有下限再谈上限**：
- 一张大图越出版心
- 一行标题挑出栏
- 段落里有意留出局部空白
- 用同字号的空行/缩进区分体例（不靠加粗或换字体）
### 6.5 优先级：先功能，再形式对齐
"全标点全宽 + 不避头尾 + 数字字母全角"虽能纵横绝对对齐，但牺牲易读性。**先做完下面这些，再考虑形式对齐**：
- 标点宽度调整（见 `punctuation.md`）
- 避头尾（见 `punctuation.md § 四`）
- 换行控制（见 `title-and-breaking.md`）
- 正字法选择（汉字数字 vs 阿拉伯数字、中西混排策略）
"为形式牺牲功能"是错。
## 七、W3C CLReq 关键数值速查表
把 W3C《中文排版需求》里散落的硬数值集中在一起，方便查。
### 字号 / 行长 / 行距
| 项目 | 最小 | 推荐 | 最大 |
|---|---|---|---|
| 正文字号 | 6 号 (7.875pt ≈ 2.8mm) | 五号 10.5pt / 小五 9pt | — |
| 行长（每行字数）| ≥ 10 字 | 17–40 字 | 横排 ≤ 48 字 / 直排 ≤ 55 字 |
| 行距（字号比例）| 50% 字号 | 50–100% 字号 | 100% 字号（超出不增易读性）|
| 行高（含字本身）| 1.5 × 字号 | 1.5–2 × 字号 | 2 × 字号 |
| 段首缩进 | — | 仅在书籍/公文/古典长文等模板指定时使用；常见 2em，短栏可 1em | — |
| 直排带注音行距 | ≥ 1.5 × 基字 | — | — |
| 行间标点单面装行距 | ≥ 1/2 字号 | — | — |
| 行间标点双面装行距 | ≥ 5/8 字号 | — | — |
### 中西混排间距
| 间距 | 最小 | 默认 | 最大 |
|---|---|---|---|
| 中西文之间 | 1/8 em | 1/4 em | 1/2 em |
| 西文词距 | 1/4 em | 1/3 em | 1/2 em |
| 行末标点 | 半字宽 | 半字宽 | 半字宽（固定） |
### 注音与拼音字号比例
| 注法 | 注文字号 | 行距加成 |
|---|---|---|
| 注音符号（Bopomofo） | 基字的 30% | 行距 ≥ 1.5 × 基字 |
| 汉语拼音 | 基字的 50% | 同上 |
| 轻声符（注音） | 基字的 1/15 | — |
### 标题占行
| 标题层级 | 占行 | 字号（正文 9pt 时） |
|---|---|---|
| 大标题（章首） | 4–5 行 | 18–24pt |
| 中标题（节首） | 2–3 行 | 12–15pt |
| 小标题 | 1–2 行 | 10–12pt |
| 双行标题 | 3 行 | 主 12pt + 副 9pt |
| 同行标题 | 1 行（接续正文）| 9pt 加粗 |
### 连续标点宽度
| 状态 | 宽度 |
|---|---|
| 任意两个相邻标点共 | 2 字（未挤压） |
| 应缩到 | **1.5 字宽** |
| 可进一步缩到 | 1 字宽 |
## 八、横排 / 直排版心的方向差异
不同方向下版心的"行 / 列"含义对调：
| 概念 | 横排 | 直排 |
|---|---|---|
| 一行 | 水平一行字 | 垂直一行字 |
| 行长 | 水平宽度 | 垂直高度 |
| 每页行数 | 垂直堆叠多少行 | 水平排列多少行 |
| 行间距 | 上下两行之间 | 左右两行之间 |
| 版心宽 W | 横向尺寸 | 横向尺寸（= 行数 × 字号）|
| 版心高 H | 纵向尺寸 | 纵向尺寸（= 每行字数 × 字号）|
| 订口 L | 左侧（右页）/ 右侧（左页）| 右侧（右页）/ 左侧（左页）|
| 切口 R | 右侧（右页）/ 左侧（左页）| 左侧（右页）/ 右侧（左页）|
详见 `directions.md`。
skills/design/horizontal-craft/reference/punctuation.md
Executable
+413
View File
@@ -0,0 +1,413 @@
# 标点全规则 Punctuation：风格 / 挤压 / 避头尾 / 破折号
中文排版的"暗物质"。占文本面积 5%–15%，决定 95% 的"专业感"。本文按 6 个主题展开：4 种标点风格、加法/减法模式、4 级避头尾、行内挤压/拉伸优先级、破折号专题、Unicode 码位速查。
## 一、4 种标点风格
不要混用。一个项目锁定一种风格。
### 1. 全角式（Full-width）
- 所有标点占 1 个汉字宽
- 出现场景：默认网页排版（引擎不调）、《普列汉诺夫美学论文选》等老派出版
- 优点：纵横对齐严格
- 缺点：标点连用形成"白窟窿"（` "。（ ` 三符 ≈ 3 格空白）
- CSS：默认行为（无需特别处理）
### 2. 半角式（Half-width）
- 所有标点占 0.5 个汉字宽
- 出现场景：辞典（《汉语大字典》节约空间）、苹果中国官网 2018 年（用 WebFont SF Pro SC）
- 优点：紧凑，西文混排自然
- 缺点：句末停顿感弱，影响阅读节奏
- CSS：`font-feature-settings: "halt" 1;` 或换用半宽字体
### 3. 开明式（Kaiming-style，大陆纸媒主流）
- **句末标点全宽**：`。 ？ ！`（句号、问号、叹号）
- **句内标点半宽**：`， 、 ； ：`（逗号、顿号、分号、冒号）
- 出现场景：大陆纸媒、方正飞腾默认、绝大多数大陆图书
- **推荐用于大陆现代横排正文**
- CSS：手动控制或用 InDesign 标点挤压预设
### 4. 居中式（Centered，港台主流）
- 所有标点全宽 + 字面正中
- 同时适应横排和直排（标点位置一致）
- 出现场景：港台几乎所有出版物、传统书法集
- 优点：方向无关、对纵横对齐友好
- 缺点：横排时"。"看着像浮在中间
- CSS：港台地区字体（如华康、文鼎）自带这种字面分布
### 选择决策表
| 项目类型 | 推荐风格 | 备注 |
|---|---|---|
| 大陆现代图书 / 杂志 / 报刊 | 开明式 | 主流选择 |
| 大陆学术论文 / 招股书 / 公文 | 开明式 | 严肃 |
| 港台繁体书籍 | 居中式 | 民国延续 |
| 字典 / 辞海 / 工具书 | 半角式 | 节约空间 |
| 网页正文（无引擎支持时） | 全角式（被迫） | 加 `text-spacing-trim` 可改善 |
| 现代网页 / App（有引擎） | 开明式 + `text-spacing-trim` | 推荐 |
| 古籍影印 / 文言 | 居中式或全角式 | 配直排 |
## 二、加法模式 vs 减法模式
**这是认知误区的重灾区。**
### 加法模式（Additive，专业排版的方式）
- 标点本身 = **半宽**
- 加上一侧或两侧的**空隙**凑成全宽
- 调整对象 = 空隙（可拿掉、可缩半、可拉满）
- 采用方：InDesign、QuarkXPress、JIS、Adobe 全系
- 标点连用时：把相邻一侧的空隙拿掉
### 减法模式（Subtractive，大众默认认知）
- 标点本身 = **全宽**
- 通过"挤压"去掉部分宽度
- 调整对象 = 标点字面本身
- 采用方：方正自家排版软件、Word 中文版部分预设
- 问题：在加法模式的字体上做减法会算错
### 实操判断
**用 InDesign / Adobe 系统**：默认加法模式。选字体时优先选标点"偏靠式"的字库（思源、华文、蒙纳）；规避方正大量正文字体（方正新书宋、方正悠黑、方正宋一）—— 它们把标点摆在字面正中（"居中式"），与 Adobe 算法错位。
**用方正飞腾**：默认减法模式，方正字库内部自洽，不会出问题。
**Web / CSS**：现代 `text-spacing-trim: space-all` 是加法模式实现。
### 加法模式下标点的 3 类分组
| 类别 | 标点 | 空隙 |
|---|---|---|
| **第 1 类**：默认密排不加空 | 着重号、分隔号、连接号短横、日文 `？！` | 0 |
| **第 2 类**：一边加二分空（大陆 + 日文绝大多数） | 大陆问号 / 叹号 / 冒号 / 分号 / 逗号 / 顿号 / 句号；蝌蚪引号 ""''；圆括号 ()；书名号《》 | 半宽 + 二分空 = 全宽 |
| **第 3 类**：两边各加四分空（港台多数 + 日文中点） | 港台问号 / 叹号 / 冒号；日文 `・` | 半宽 + 左 1/4 + 右 1/4 = 全宽 |
## 三、行末半角原则（GB/T 15834-2011 §5.1.10）
**强制规则**：标点排在一行末尾时，若为全宽字符**应占半角字符的宽度**。即"行末标点 → 半宽"。
- 这是中国大陆和多数中国出版社的硬性规范
- 视觉效果：行尾对齐（不会因末标点全宽撑出视觉外凸）
- 实现：InDesign "标点挤压" → 行尾减半（自动）；CSS `hanging-punctuation: allow-end` 让标点悬挂到版心外
## 四、避头尾 4 级严格度（W3C CLReq §6.1.1）
**同一文档内必须统一一种严格度。**
### 0 级：none（不处理）
- 不做任何避头尾
- 见于港台部分报刊（标点居中无突兀）
- 大陆不推荐
### 1 级：basic（基本处理，最低标准）
- **不可在行首**：`。， 、 ； ： ！ ？ … 》 」 』 ） 】`、所有"结束"括号和引号、连接号 `–`、间隔号 `·`、分隔号 `/`
- **不可在行尾**：`（ 【 《 「 『 " '`、所有"开始"括号和引号
### 2 级：GB 法（大陆国标，推荐用于正式出版）
- basic 全部规则
- **加**：分隔号 `/` 也不可在行尾
- 这是中国大陆图书业的默认级别
### 3 级：strict（严格，推荐用于精装/正式出版）
- GB 法全部规则
- **加**：破折号 `——` 不可在行首
- **加**：省略号 `……` 不可在行首
- InDesign "简体中文避头尾" 默认即此级
### 完整字符表
#### 不可出现在行首
```
。，、；：？！…—··――
）】〗〕〉》」』〙〗｠
’"
%‰‱℃℉°′″
／、‧/
```
#### 不可出现在行尾
```
（【〖〔〈《「『〘〖｟
‘"
$¥€£¢₩₫
```
#### 不可分离（不可在中间断开）
```
—— 破折号（2 字宽视为一体）
…… 省略号（2 字宽视为一体）
123456 阿拉伯数字内部及小数点
50% 数字 + 百分号 / 千分号 / 度数
20℃ 数字 + 单位
±5 符号 + 数字
m² 被标记词 + 上下标
①② 注释记号 + 被注词
word 西文单词（按 hyphenation）
```
### 处理顺序："先挤进后推出"
W3C 明文规则。
1. **第一步**：检查标点能否通过"宽度挤压"塞回前行末
- 行末全宽标点 → 半宽
- 连续标点 → 拿掉相邻一侧的空隙
- 中西间距 1/4 em → 1/8 em
2. **第二步**：仍塞不下，从前行末字推入下行
3. **第三步**：前行多出的空间按拉伸优先级处理
4. **第四步**：最后才平均加大字间距
**口诀**：**挤进只需腾半字宽，推出至少动一字宽；正文排版应尽量少调**。
### 推出后救济：均排（justify within）
行内调整无法整齐时，按拉伸优先级把空间分配出去。详见下一节。
## 五、行内挤压 / 拉伸优先级（W3C CLReq §6.2.2）
**这是排版引擎的内部算法表，知道了它你才知道为什么 InDesign 那样调字。**
### 挤压优先级（从高到低）
| 优先级 | 对象 | 挤压幅度 |
|---|---|---|
| a | **行末标点** | 固定半字宽（GB/T 15834-2011 §5.1.10） |
| b | 行内西文词距 | 最小 **1/4 em**，多处同等量 |
| c | 间隔号 `·` | 从两侧同等量挤，最小到 0（结果半字宽） |
| d | 夹注符号（括号）| 开始括号前侧、结束括号后侧，最小到半字宽 |
| e | 逗号 / 顿号 / 分号 | 后侧或两侧同等量挤，最小到半字宽 |
| f | 中西间距 | 最小 **1/8 em**（部分风格固定 1/4 em 不允许调） |
| g | 句号 / 问号 / 叹号 | 有空间则挤到半字宽（部分风格不允许调，因句末停顿大） |
### 拉伸优先级（从高到低）
| 优先级 | 对象 | 拉伸幅度 |
|---|---|---|
| a | 西文词距 | 最大 **1/2 em**，多处同等量 |
| b | 中西间距 | 从 1/4 em 默认值起，最大 **1/2 em**（实际多数风格只到 1/3 em）|
| c（最后选项） | 字间距 | 同等量拉，但**不可对禁则字间距拉伸**；连接号、分隔号及其前后字符避免拉伸 |
### 关键数值速查
| 间距 | 最小 | 默认 | 最大 |
|---|---|---|---|
| 西文词距 | 1/4 em | 1/3 em | 1/2 em |
| 中西间距 | 1/8 em | 1/4 em | 1/2 em |
| 间隔号两侧 | 0 | 1/4 em | 1/4 em |
| 行末标点 | 半字宽 | 半字宽 | 半字宽（不变） |
| 连续标点共 2 字 | 1 字 | 1.5 字 | 2 字 |
## 六、连续标点处理（W3C CLReq §6.3.2）
**最常见的灾难现场**：标点连用形成"白窟窿"。
未处理：
```
（明）钟惺、谭元春《唐诗归》钟评后二句"二
句儿童皆诵之，然其言自足不朽"。（清）弘历
↑↑↑
"。（ 三个全角占 3 格
```
处理后：
```
（明）钟惺、谭元春《唐诗归》钟评后二句"二句儿童皆
诵之，然其言自足不朽"。（清）弘历《唐宋诗醇》评
↑↑
"。（ 挤压到约 1.5 字宽
```
### 规则
- 任意两个相邻标点共 2 字宽时**应缩到 1.5 字宽**
- 可进一步缩到 1 字（但通常不缩到 1 字，避免读者错觉两符号是一个）
- 挤压方向让开始/结束括号紧靠被夹内容
### 实现
- InDesign：段落 → 中文排版设置 → "标点挤压" → 选"简体中文默认"或自定义
- CSS：`text-spacing-trim: space-all`（自动处理）
## 七、破折号专题
**最容易出错的单一符号。**
### 1. 码位优先级
1. **U+2E3A** TWO EM DASH `⸺` —— 正式码位，占 2 字一体，**首选**
2. **U+2014** EM DASH `—` × 2 —— 事实标准，思源字体通过 `ccmp` 替换为长横，**主用**
3. ❌ U+2015 HORIZONTAL BAR `―` —— 简中字库多数会断开
4. ❌ U+2500 BOX DRAWINGS LIGHT HORIZONTAL `─` —— 语义错误（制表符）
5. ❌ U+30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK `ー` —— 日文长音符
6. ❌ U+FF0D FULLWIDTH HYPHEN-MINUS `－` —— 半宽连接符
7. ❌ U+002D HYPHEN-MINUS `-` —— ASCII 连字符
### 2. 字体推荐（破折号正确实现）
**推荐**：
- 思源黑体 / 思源宋体（通过 OpenType `ccmp` 把连续两个 U+2014 替换为整段长横，再用 `locl` 在 CJK 语言下切换为字框居中字形）
- 苹方 PingFang
- HarmonyOS Sans / MiSans
**雷区**（破折号断开 / 顶格 / 下沉）：
- 中易宋体、中易仿宋（破折号"无论如何接不上"）
- 旧版微软雅黑（破折号下沉且双连超过两字宽）
- 华文黑体（破折号顶格不居中）
- 兰亭黑（破折号顶格且不居中）
### 3. 字体优先级陷阱（CSS）
❌ **错误**：
```css
font-family: "Helvetica", "PingFang SC"; /* 英文字体在前 */
```
连续两个 `—` 会优先取 Helvetica 字形，导致下沉、断开、双横之间留白。
✅ **正确（方案 A）**：删掉英文字体，用系统中文字体
```css
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
```
✅ **正确（方案 B）**：用 `unicode-range` 拆 `@font-face`
```css
@font-face {
font-family: "Helvetica Local";
src: local("Helvetica");
unicode-range: U+0000-007F; /* 只用于 ASCII */
}
body {
font-family: "Helvetica Local", "PingFang SC", sans-serif;
}
```
✅ **正确（方案 C）**：声明 `lang` 激活 `locl`
```html
<html lang="zh-CN">
```
### 4. 防破折号中间断开
**InDesign**：
1. 段落面板 → "禁止断字" 勾选（默认开）
2. 避头尾规则集 → "禁止分开的字符" → 加入 `U+2014`、`U+2015`、`U+2500`
3. 不要只勾"不换行"（那只是局部手动）
**Word**：
- 中文版"后置标点"里的 `―` 实际是 U+2015，不是 U+2014
- 要让 U+2014 也避头尾，须手动加进"自定义后置标点"
- 终极保险：选中单个 `—`，格式→字体→字符间距→缩放 200%，硬把单 em dash 变成两字宽（来自《排版与校对规范》）
**CSS**：
```html
<!-- 两个 em dash 之间禁止断行 -->
他说—&#8288;—我不去了。
```
### 5. 国标依据
- GB/T 15834-2011 §4.10 / §5.1.4：破折号占两个字位置、上下居中、**不能中间断开**
## 八、Unicode 码位速查（W3C CLReq 推荐）
| 符号 | Unicode | 推荐 | 不推荐替代 |
|---|---|---|---|
| 句号 | U+3002 。 | ✅ | U+FF0E ． / U+002E . |
| 逗号 | U+FF0C ， | ✅ | U+002C , |
| 顿号 | U+3001 、 | ✅ | — |
| 分号 | U+FF1B ； | ✅ | U+003B ; |
| 冒号 | U+FF1A ： | ✅ | U+003A : |
| 问号 | U+FF1F ？ | ✅ | U+003F ? |
| 叹号 | U+FF01 ！ | ✅ | U+0021 ! |
| 弯双引号开 | U+201C " | ✅（横排）| — |
| 弯双引号闭 | U+201D " | ✅（横排）| — |
| 直角引号开 | U+300C 「 | ✅（直排）| — |
| 直角引号闭 | U+300D 」 | ✅（直排）| — |
| 双重直角引号开 | U+300E 『 | ✅（直排）| — |
| 双重直角引号闭 | U+300F 』 | ✅（直排）| — |
| 圆括号开 | U+FF08 （ | ✅ | U+0028 ( |
| 圆括号闭 | U+FF09 ） | ✅ | U+0029 ) |
| 书名号开 | U+300A 《 | ✅ | — |
| 书名号闭 | U+300B 》 | ✅ | — |
| 单书名号开 | U+3008 〈 | ✅ | — |
| 单书名号闭 | U+3009 〉 | ✅ | — |
| 破折号 | U+2E3A ⸺ / U+2014×2 —— | ✅ | U+2015 / U+2500 / U+30FC |
| 省略号 | U+2026×2 …… | ✅ | U+22EF（横直自动居中替代）|
| 连接号短横 | U+2013 – | ✅ | — |
| 连接号一字线 | U+2014 — | ✅ | — |
| 浪纹线 | U+FF5E ～ | ✅ | U+007E ~ |
| 间隔号 | U+00B7 · | ✅ | U+30FB / U+2027 / U+2022 |
| 分隔号 | U+002F / 或 U+FF0F ／ | ✅ | — |
| 着重号 | U+25CF ● 或 U+2022 • | ✅ | — |
## 九、CSS 完整实现（现代浏览器，2024+）
```css
.body-text {
/* 字间距：密排 */
letter-spacing: 0;
/* 标点空间挤压（加法模式实现） */
text-spacing-trim: space-all;
/* 标点悬挂到版心外（行尾标点视觉对齐） */
hanging-punctuation: allow-end;
/* 严格避头尾 */
line-break: strict;
/* 不在词中断 */
word-break: keep-all;
/* 超长 URL 允许换行 */
overflow-wrap: break-word;
/* 两端对齐 */
text-align: justify;
/* 中文字间分布 */
text-justify: inter-character;
/* 标点宽度优化（OpenType） */
font-feature-settings:
"halt" 1, /* 半宽间距 */
"palt" 1; /* 成比例排（标题用） */
}
/* 标题：不要 halt，标题密排 */
h1, h2, h3 {
font-feature-settings: "palt" 1; /* 仅成比例排 */
}
/* 网页 / H5 / 卡片正文：通常不做首行缩进 */
p {
text-indent: 0;
margin: 0 0 1em 0;
}
/* 书籍 / 公文 / 古典长文如需首行缩进，应由对应 template 明确指定 */
.book-copy p,
.official-doc p,
.classical-copy p {
text-indent: 2em;
margin: 0;
}
/* 引文段：不要斜体；缩进/边线/底色由版式决定 */
blockquote {
font-style: normal;
}
```
旧浏览器降级：用 `<wbr>` 手工断行；用脚本处理（如 `kerning.js`）。
## 十、检查清单（标点相关）
排印完成前必过：
- [ ] 标点风格（全角 / 半角 / 开明 / 居中）是否全文统一？
- [ ] 行末全宽标点是否变为半宽？
- [ ] 避头尾级别（basic / GB / strict）是否选定并启用？
- [ ] 连续标点是否被挤压到 1.5 字宽内？
- [ ] 破折号是否用了 U+2014×2（不是 4 个连字符）？
- [ ] 破折号字体是否选了思源 / 苹方而不是中易 / 旧版雅黑？
- [ ] 破折号是否被加入"禁止分开"集？
- [ ] 引号横排用弯""'',直排用直角「」『』？
- [ ] CSS `font-family` 是否把中文字体放在英文字体之前？
- [ ] HTML 是否声明了 `lang="zh-CN"` 或 `lang="zh-TW"`？
- [ ] 段落组织是否符合媒介：网页/卡片不机械首行缩进，书籍/公文/古典长文才按模板缩进？
- [ ] 中英混排是否有 1/4 字宽间距？
skills/design/horizontal-craft/reference/text-detail.md
Executable
+344
View File
@@ -0,0 +1,344 @@
# 文本排印细节 Text Typesetting Details
「最基础的美学，易忽略的细节与阅读」——很多看似高级的版面，其实只是把这些"小事"全做对了。
> **本文专注**：字号 / 字重 / 字距 / 行距 / 段落 / 灰度 / 中英混排 / 孤行孤字 / Ruby 注音。
> **标点专题**（避头尾 / 破折号 / 4 种风格 / 加法减法模式 / 挤压拉伸优先级）见 `punctuation.md`。
> **断行专题**（标题断句 / 不可分离禁则）见 `title-and-breaking.md`。
## 一、版心（Type area）：决定阅读心理压力
版心位置和页边距对比强烈到能"潜移默化影响读者审美"。
- **太满**（每行 48 字、每页 30 行、四周边距小）→ 文字"扑面而来"，回行困难，疲劳
- **舒展**（每行 17–25 字、页边距按比例递增）→ 优美、轻松、愉悦
每行字数太多的版面，会让读者阅读时心理压力较大，回行时不易找到下一行的起头，增加视觉疲劳。
### 横排页边距三大法则
1. **内紧外松**：订口（书脊）< 切口（外）。视觉重心向外。
2. **上紧下松**：天头 < 地脚。视觉重心略往上。
3. **比例递增**：常用 **2 : 3 : 5 : 8** 或 **3 : 5 : 8 : 13**（费氏数列）
最常用配比（横排书籍）：
```
订口 : 切口 : 天头 : 地脚 = 3 : 5 : 8 : 13
即 L3 + R5 + O8 + U13 （字数）
```
### Web/H5 边距换算
设计稿 375px 宽 H5：
- 屏宽 375，左右各 20–24px，正文版心 327–335px
- 上 24–32px，下 32–48px
- 模块间距用 16/24/32（4 的倍数）
## 二、字间距 字距
**核心法则：正文密排，不动字距。**
### 字面率（Face ratio）
字符在方框内实际占多少。现代字体：
- 汉仪玄宋：92%
- 方正雅宋：94%
- 汉仪书宋：~96%
- 方正书宋：96%
- 思源黑体：~95%
字面率 < 100% 意味着**两个字紧贴排版时已经天然有间距**，不需要再额外加字距。
### 字距规则
- **正文**：letter-spacing 0，密排
- **标题**（≥ 24pt）：可加 0.05–0.1em 增加从容感
- **超大字号**（≥ 40pt 海报）：可加 0.1–0.2em
- **Logo / 单字装饰**：字距按设计意图
### 4 种字距模式（W3C 术语）
| 模式 | 字距 | 用途 |
|---|---|---|
| **密排** | 0 | 默认正文 |
| **疏排** | 1/4 em / 1/3 em / 1/2 em / 1 em | 标题求平衡、图说短文求平衡、短诗词、儿童读物 |
| **均排** | 由算法均摊 | 禁则处理后凑齐行长；列表中并列项目求体例一致 |
| **紧排** | 负值 | 杂志标题、广告文案多字时凑一行（**不适用于书籍标题与正文**）|
CSS 注意：
```css
/* 正文区，不要碰 */
.body { letter-spacing: 0; }
/* 大标题可以稍加 */
.headline { letter-spacing: 0.05em; }
/* 不要这样 */
.body-bad { letter-spacing: 1px; } /* 破坏字号节奏 */
```
## 三、行间距 行距
### 比例区间
| 比例（字号:行距） | 体感 | 用途 |
|---|---|---|
| 1 : 1.0 | 密排、铅字时代标准 | 字典、报纸（每行字少时） |
| 1 : 1.33 | 紧凑 | 杂志、新闻 |
| **1 : 1.5** | **现代标准** | **网页正文、商务文档** |
| 1 : 1.7 | 舒适 | 长文阅读、技术文档 |
| 1 : 2.0 | 疏朗 | 文学、诗歌、画册说明 |
| 1 : 2.5+ | 飘散，章节断裂感 | 避免 |
W3C 规定：**行距（行间空白）= 字号的 50%–100%**；对应行高（含字本身）= 字号的 1.5–2 倍。超出 100% 不增易读性。
铅活字时代的优美版面（如 1918 年前后的期刊正文），字号 : 行距比约在 **1:1 ~ 4:3** 之间，是经典优美范例。
### 实操值
- 印刷正文 9pt → 行距 12–18pt（默认 18pt = 1:2 雍容）
- 印刷正文 10.5pt → 行距 14–18pt
- 屏幕 16px → line-height 1.5–1.7（= 24–27px）
- 屏幕 14px → line-height 1.6–1.8
**所有行距必须是模数整数倍。** 否则跨语种/跨字号无法行对齐。
### 行间标点行距加成（W3C）
- 行间有专名号（﹏）、甲式书名号（﹏）、着重号时：
- **单面装行距 ≥ 1/2 字号**
- **双面装行距 ≥ 5/8 字号**
- 直排带注音时：行距 ≥ 1.5 × 基字
## 四、字重与字号
### 字重与对比度的关系
- 字重塑造文字与载体（纸/屏）的对比度
- **小字 + 重字重** > 小字 + 轻字重（小字更需对比度）
- **大字 + 轻字重** 可显优雅，大字也禁得起轻字重
实例：薄而透的纸张上用大字重宋体作正文，文字的黑与纸张的白构成易于阅读的对比关系，大字重还能反向突出纸张的"透"。
### 字重选用矩阵
| 字号 | 屏幕 | 印刷 | 推荐字重 |
|---|---|---|---|
| 极小 | < 12px | < 6pt | Medium / Bold（55S–65S） |
| 小 | 12–14px | 6–7.5pt | Regular / Medium（45S–55S） |
| 中 | 14–18px | 8–10pt | Regular（45S–55S） |
| 大 | 18–24px | 10–14pt | Regular / Light（35S–45S） |
| 极大 | > 24px | > 14pt | Light / Thin 可选（25S–45S） |
### 层级用字重不用字体
不同字号 × 不同字重，常常会形成灰度近似的面，从而拉开与其他元素的空间关系。例如：大字号正文用较细字重，小字号辅文用中等字重，它们灰度接近，但通过字号自然分出层级。
层级关系优先级：**字号 > 字重 > 颜色 > 字体**。前两个搞不定再考虑后两个。
## 五、段落与体例
### 段落组织：不要把 2 字缩进当成通用默认
- 书籍、古典文本、公文、长篇正式印刷物：可以采用首行缩进，常见为 2 字；短栏可减弱为 1 字
- 网页、H5、小红书、Dashboard、PPT、卡片：通常不使用首行缩进，优先用段间距、分组、标题层级来组织文本
- 引文可使用整段缩进或边线/底色/卡片区分；不要机械套 4 字缩进
- 列表项无需首行缩进
- 同一作品只选择一种段落组织方式，不要“首行缩进 + 大段间距”同时堆叠
### 段落 4 种缩排模式（W3C CLReq §6.2.1）
| 模式 | 做法 | 适用 |
|---|---|---|
| **1. 全部段落首行缩排** | 所有段落首行空 2 字 | 书籍、古典文本、公文、正式印刷物 |
| **2. 首段不缩排，其余缩排** | 首段顶格，其余段缩 2 字 | 长篇文章、英译中、跨文化项目 |
| **3. 所有段落不缩排 + 段间距** | 段首顶格，段间空一定行距 | 现代网页、技术文档、H5、PPT、卡片、Markdown 渲染 |
| **4. 语气未完段断行不缩排** | 段断而语气未完时，下一段顶格 | 散文、诗、剧本 |
### 凸排（Hanging Indent）
首行不缩、次行起缩。用于：
- 剧本对白
- Q&A 问答
- 法条
- 词典词条
- 人名列表（花名册）
```
李白：床前明月光，
疑是地上霜。
杜甫：好雨知时节，
当春乃发生。
```
CSS：
```css
.hanging {
text-indent: -4em; /* 首行向左凸 4 字 */
padding-left: 4em; /* 整段左缩 4 字 */
}
```
### 段落缩排（Block Indent）
行首侧统一缩进，用于引文、诗词、副标题。字号同正文，可换字体或加段间距，段间距应为正文行的整数倍。
```css
blockquote {
margin: 1em 4em 1em 4em; /* 左右各缩 4 字 */
font-style: normal; /* 中文不要斜体 */
}
```
### 小标题处理
经典示范：用同一字体同一字号，仅用空字格区分体例。
- 引文：段首不空格，用整段缩进、边线、底色或卡片区分；具体缩进量由版式决定
- 小标题：段首空 6 字（向右推），与正文不空行
- 正文：按所选段落组织方式处理；书籍/公文可首行缩进，网页/卡片/UI 通常顶格并用段间距分组
这种"用空间代替字号"的处理，是高级排版的标志——**信息层级不靠强对比，靠空间秩序**。
### 单行对齐 4 种（W3C）
- **居中**：标题、署名、独立元素
- **行首**：列表项（左对齐于行首）
- **行尾**：日期、署名、价格（右对齐于行尾）
- **均排**：禁则处理后凑齐 / 列表并列项体例一致；**段落末行 / 段落只有一行时不用均排**
## 六、文本灰度均匀
排版的至高理想：**文字在版心内形成极致均匀的灰**，使塑造文本的型变得容易。
灰度均匀的敌人：
1. 标点未挤压 → 局部白块
2. 中英文混排无字距 → 字宽不均
3. 多字重混用 → 黑白对比跳跃
4. 行末参差不齐（左对齐）→ 右侧灰度断
5. 大量繁体字夹杂简体 → 局部更黑
灰度均匀的盟友：
1. 启用两端对齐（justify）
2. 启用中英文混排自动间距
3. 同段内字重统一
4. 标点挤压 + 避头尾
5. 行距足够稳定
### CSS 实现
```css
.body {
text-align: justify;
text-justify: inter-character; /* 中文字间分布 */
text-spacing-trim: space-all;
line-break: strict;
}
```
## 七、中英文混排
- 中英文之间**自动加 1/4 字宽空隙**（盘古之白）
- Web: `<span>中文</span> <span>english</span>` 之间留半个空格；或用 `text-autospace`（IE 老规范）/CSS Text Module Level 4 的 `text-spacing`
- Markdown 写作：手工在中英之间空格
- 西文标点（半角）和中文字符之间也要加空格
- 数字与中文之间同样要加：`第 3 章`，不要 `第3章`
- 单位与数字之间不空：`30px` `9pt`，不要 `30 px`
### 间距 W3C 规则
- 横排西文字母用比例字体；数字用比例或等宽字体
- 汉字与西文字母/数字间空隙 **≤ 1/4 em**（默认 1/4 em，最小 1/8 em，最大 1/2 em）
- 西文/数字在行首行尾时**不加空白**
- 中文点号前后、中文开始夹注符号之后、结束夹注符号之前的西文/数字**不调整字距、不加空白**
## 八、孤行孤字（Widow & Orphan）救济
排版的"末页综合症"。详见 `title-and-breaking.md` §五。
### 孤字不成行（Orphan）
段落最后一行只有 1 字 + 1 标点。
救济顺序：
1. **挤进上行**（首选）：标点宽度调整、中西间距压缩、字距均压
2. **删字回前行**：与作者商议删 1–2 字
3. **加字补足**：补 1 字让末行≥3 字
4. **均排末行**（次选）：仅适用于诗歌对联
### 孤行不成页（Widow）
页首是前段的最后一行。
救济顺序：
1. **孤行回前页**：超出版心 1 行接前段
2. **前页末段取 1 行**：修改前段提前结束
3. **删字**：删本段开头让孤行不孤
4. **加字**：补 1 行字数
CSS：
```css
p {
orphans: 2; /* 段末至少留 2 行 */
widows: 2; /* 段首至少留 2 行 */
}
```
## 九、Ruby 注音 / 拼音（W3C CLReq §5.5）
### 注音符号（Bopomofo，台湾用）
- 横排 / 直排原则上都置基字**右侧**
- 注文字号 : 基字 = **3 : 10**
- 调号同字号；轻声符 = 1 : 15
- 声调位置：
- 平上去入声：标在末符号**右上方**
- 入声：右下方
- 轻声：标在前方
- 直排向上回返半个符号位、横排向右突出半个符号位
### 汉语拼音
- **仅横排**
- 常放在基字**上方**（部分场景下方）
- 注文字号 = 基字字号的 **1/2**
- 相邻注文间距 ≥ 西文词间空格 ≈ 1/4 字宽
- 字形：用 a / g 单层、二声调下粗上细的**无衬线体**（出版/教育界惯例，无国标）
**两种用法**：
1. **单字标音**：注文总在上方、汉字间字距大、全小写
2. **分词连写标音**：注文常在下方、词间约 1/2 字宽空、句首/专名大写、标点跟左侧注文
### HTML5 Ruby
```html
<!-- 单字标音 -->
<ruby>
汉<rt>hàn</rt>语<rt>yǔ</rt>拼<rt>pīn</rt>音<rt>yīn</rt>
</ruby>
<!-- 整词标音 -->
<ruby>
汉语拼音<rt>Hànyǔ Pīnyīn</rt>
</ruby>
<!-- 含括号回退 -->
<ruby>
汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
</ruby>
```
CSS：
```css
ruby {
ruby-position: over; /* 注文在上 */
/* ruby-position: under; // 注文在下（分词连写法）*/
}
rt {
font-size: 0.5em; /* 拼音 = 基字 1/2 */
font-family: "Source Sans Pro", "Inter", sans-serif;
line-height: 1;
}
```
### 注意：CSS Ruby 各浏览器支持不一致；Apple Books 字体选择较全。Web 上稳定方案是手动用 `<sup>` 模拟。
## 十、检查清单（排印完成前必过）
- [ ] 正文行长 17–40 字（最多 48 横排 / 55 直排）？
- [ ] 行距是字号 1.5–2 倍？
- [ ] 行距是模数整数倍？
- [ ] 所有字号都在模数体系内？
- [ ] 内 < 外 < 上 < 下 的页边距？
- [ ] 正文 letter-spacing 是 0？
- [ ] 段落组织方式是否符合媒介（网页/卡片不机械使用首行缩进，书籍/公文再按模板设置）？
- [ ] 一段内字重统一？
- [ ] 中英文之间有 1/4 字宽空格？
- [ ] 段末是否有"孤字 + 标点"？
- [ ] 页首是否有"孤行"？
- [ ] 整页放远看文本灰度均匀？
- [ ] 段落是否选定 4 种缩排模式中的一种并贯穿全文？
任何一项不过关，先修这一项再说"美学"。
skills/design/horizontal-craft/reference/title-and-breaking.md
Executable
+349
View File
@@ -0,0 +1,349 @@
# 标题断句 与 一般断行 Title Line Breaking & Word Wrapping
中文排版里最容易被忽略的一组规则。**正文断行和标题断行逻辑完全相反**——正文按字、标题按词。这个差异不知道，就会把"我外交部强烈谴责伊拉克"和"大使馆被炸事件"在标题里硬切两行。
## 一、核心原则
| 文本类型 | 断行逻辑 | 原因 |
|---|---|---|
| **正文** | 按字断，不按词 | 汉语双音节词约占 60%，按词断会形成锯齿状右缘，方块字硕大无法形成西文那样的"波浪状" |
| **标题** | 必须按词断 | 字数少、视觉占比大，词被切开会产生歧义和阅读阻塞 |
| **诗词** | 按句断（每句独占一行或按对齐排列） | 节奏感优先 |
| **目录、列表** | 按条目断（必要时换行用次行缩进） | 凸排（hanging）保持检索性 |
## 二、标题断行规则
### 1. 不可在词中间断开
绝对不可拆的"词单位"：
- **专有名词**：人名（毛泽东 / 习近平 / 苏炳添）、地名（北京 / 哈尔滨 / 上海浦东）、机构名（外交部 / 中央电视台）、品牌（华为 / 字节跳动）
- **术语**：人工智能、深度学习、量子纠缠、新冠肺炎
- **数字 + 单位**：3 公斤、500 万、第 5 章
- **数字串**：2024 年、100 元
- **书名 / 影片名 / 歌名**：《静夜思》、《流浪地球 2》
- **成语 / 熟语**：守株待兔、海纳百川（4 字成语整体不拆）
### 2. 虚词位禁忌
| 字 / 词 | 禁忌位置 | 原因 |
|---|---|---|
| **的、地、得、之、所** | **不入行首** | 修饰关系断了 |
| **和、与、及、或、跟、同** | **不入行末** | 并列关系悬空 |
| **是、为、乃** | 不入行首 | 系动词需有主语 |
| **在、于、对、向、从** | 不入行末 | 介词需带宾语 |
| **了、着、过** | 不入行首 | 助词依附前字 |
| **吗、呢、吧、啊、哦** | 不入行首（语气词通常）| 同上 |
### 3. 标题反例与修正
❌ **反例 1**（歧义）：
```
我外交部强烈谴责伊拉克
大使馆被炸事件
```
读者可能误解为"伊拉克大使馆被炸"。
✅ **修正**：
```
我外交部强烈谴责
伊拉克大使馆被炸事件
```
❌ **反例 2**（词中断）：
```
苹果发布全新人工智
能芯片 M5
```
✅ **修正**：
```
苹果发布全新
人工智能芯片 M5
```
❌ **反例 3**（虚词位）：
```
中国队战胜了美国队和
日本队
```
✅ **修正**（"和"不入行末）：
```
中国队战胜了
美国队和日本队
```
### 4. 标题占行规则（铅排经验值）
标题必须占整数倍正文行高，否则跨栏对不齐。
| 标题层级 | 占行（含上下空白） | 典型字号（正文 9pt 时） |
|---|---|---|
| 大标题（章首） | 4–5 行 | 18–24pt |
| 中标题（节首） | 2–3 行 | 12–15pt |
| 小标题 | 1–2 行 | 10–12pt |
| 双行标题（主 + 副）| 3 行 | 主 12pt + 副 9pt |
| 同行标题（小节首）| 1 行（接续正文）| 9pt 加粗 |
**关键原则**：标题字号 + 上下空白 = 正文行高 × N。**否则后面所有正文都对不齐基线**。
### 5. 标题在页面中的位置
- **大标题（章首）**：必出现在**正面页**
- 横排左翻书 → 右页（奇数页）
- 直排右翻书 → 左页（奇数页）
- 若大标题前一章末页停在正面页 → 反面页留空白（"双白页"是必要的，不要为省纸打破）
- **换页 vs 单页起**：
- 换页：从新页开始，不论奇偶（中小标题用）
- 单页起：必从正面页开始（大标题用）
- **中小标题孤行处理**：若中小标题落到页末且后续正文容不下，**整个标题换到下一页开头**
### 6. 标题对齐方式
| 排版方向 | 大标题对齐 | 小标题对齐 |
|---|---|---|
| 横排 | 多居中 | 多左对齐 / 段首空格 |
| 直排 | 对行首（顶天） / 下沉（如下字常用 2 字位）| 同 |
**直排标题"下字 2 字位置"**：直排时标题从天头空 2 字开始，避免顶天造成压抑。
### 7. 同行标题
小节标题不换行，直接接续正文。处理：
```
四、本章小结 本章我们讨论了……
↑
1 字空白
```
- 标题与正文之间空 1 字位置
- 若标题字号非整数倍，调整空白让正文头尾对齐
## 三、CSS / HTML 实现标题断行
### 方法 1：手工 `<br>` 控制断点（最稳）
```html
<h1>
我外交部强烈谴责<br>
伊拉克大使馆被炸事件
</h1>
```
### 方法 2：`<wbr>` 提示断点（允许在此换行）
```html
<h1>苹果发布全新<wbr>人工智能芯片 M5</h1>
```
### 方法 3：U+2060 WORD JOINER（禁止在此换行）
```html
<h1>第&#8288;5&#8288;章&nbsp;深度学习</h1>
```
注意：**不要**用 `&#8205;`（U+200D ZERO WIDTH JOINER）—— 那是给阿拉伯文/天城文连写用的，对中文断行无效。
### 方法 4：CSS `text-wrap: balance`（现代浏览器）
```css
h1, h2, h3 {
text-wrap: balance; /* 让多行标题各行字数尽量均衡 */
}
```
### 方法 5：响应式断点（不同屏宽换不同断点）
```html
<h1>
我外交部强烈谴责<br class="md-only">
<wbr>伊拉克大使馆被炸事件
</h1>
<style>
@media (min-width: 768px) {
.md-only { display: inline; }
}
</style>
```
## 四、正文断行规则
正文按字断，但 6 类位置**不能拆**（不可分离禁则）：
### 1. 阿拉伯数字内部不拆
- ❌ `100`<br>`0 元`
- ✅ 整体到下一行
### 2. 数字 + 单位不拆
- 数字 + `%`、`‰`、`°`、`℃`、`℉` 不拆
- 数字 + `±`、`+`、`−` 之前的符号不拆
- 数字 + 货币 `¥`、`$`、`€`、`£` 不拆
### 3. 上下标 / 注释记号 + 被标记词不拆
- ❌ `m`<br>`²`
- ❌ 苹果<sup>1</sup> <br> 公司
- ✅ 注释上标紧贴前一个字
### 4. 破折号 / 省略号不可拆开
- 破折号 `——`（2 字宽）不可在中间断开
- 省略号 `……`（2 字宽）不可在中间断开
- 连续多个破折号 `————` 允许在每一组之间拆
### 5. 西文单词按 hyphenation 断
- 横排中混排的西文单词遇行尾按西文连字符规则断词
- 直排中旋转 90° 的西文单词除连字符外不拆
### 6. URL / 邮件地址特殊处理
- 建议在 `@`、`/`、`?` 等符号处断行
- **不得加连字符**（连字符会被误解为 URL 的一部分）
- **不改大小写**
- CSS：`overflow-wrap: anywhere`（针对长 URL）
### CSS 实现"不可分离禁则"
```css
.body-text {
word-break: keep-all; /* 不在词中间断 */
overflow-wrap: break-word; /* 但允许长 URL 换行 */
line-break: strict; /* 严格避头尾 */
text-spacing-trim: space-all; /* 标点空间挤压 */
hanging-punctuation: allow-end; /* 末行标点悬挂 */
}
/* 关键：不要这样写 */
.bad {
word-break: break-all; /* ❌ 会让中文按字硬断，避头尾全失效 */
}
/* 不可断的小组：数字+单位、上下标 */
.unit, .superscript-group {
white-space: nowrap; /* 整组不换行 */
}
```
### 不可断小组的 HTML 标记
```html
<!-- 数字+单位 -->
温度 <span class="unit">25 ℃</span>
价格 <span class="unit">¥ 999.99</span>
<!-- 上下标 -->
面积 <span class="superscript-group">10 m<sup>2</sup></span>
<!-- 注释记号 -->
苹果公司<sup class="superscript-group">①</sup>
<!-- 用 U+2060 也可 -->
温度 25&#8288;℃
```
## 五、孤行孤字（Widow & Orphan）
排版的"末页综合症"：段末单字、页首单行。**不修就是失败。**
### 1. 孤字不成行（Orphan）
**症状**：段落最后一行只有 1 个字 + 1 个标点。
**3 种救济**（按优先级）：
#### 救济 A：挤进上行（首选）
- 通过标点宽度调整：把上一行的标点全部从全宽改为半宽，腾出空间
- 通过中西间距调整：把中西混排的 1/4 em 间距压到 1/8 em
- 通过字距均压：上一行字距压缩 1/24 em
#### 救济 B：删字让孤字回前行
- 与作者商议删去 1–2 个字
- 修改句法（"非常" → "很"）
#### 救济 C：加字让末行≥3 字
- 与作者商议补 1 字让末行不再"孤"
- 加补缀词（"了"、"的"、"则"）
#### 救济 D（次选）：均排末行
- 让末行 1 个字均排到整个版心宽度
- 适用于诗歌、对联，**不适用于现代文**（看着别扭）
### 2. 孤行不成页（Widow）
**症状**：页首是前段的最后一行（1 行 + 段间空白）。
**4 种救济**（按优先级）：
#### 救济 A：孤行回前页（突出版心）
- 让孤行超出地脚版心 1 行，与前段连在一起
- 此页地脚临时缩小 1 行（在不严格场合允许）
#### 救济 B：前页末段取 1 行
- 修改前段，让前段在前页最后一行结束自然停顿
- 让新段从本页开始（最自然）
#### 救济 C：删字
- 删本段开头 1 行字数，让孤行不再孤
#### 救济 D：加字
- 在前段补 1 行字数
### 3. CSS 实现
```css
p {
orphans: 2; /* 段末至少留 2 行（避免 1 字孤悬）*/
widows: 2; /* 段首至少留 2 行（避免 1 行孤悬）*/
}
/* 段不要被分页符切断 */
h1, h2, h3 {
page-break-after: avoid; /* 标题后不分页 */
break-after: avoid-page; /* 同上，现代写法 */
}
img, figure {
page-break-inside: avoid; /* 图片不被切断 */
break-inside: avoid;
}
```
## 六、断行控制工具汇总
| 工具 | 控制粒度 | 用法 | 平台 |
|---|---|---|---|
| `<br>` | 强制换行 | HTML | 所有 |
| `<wbr>` | 软断点（允许在此换行） | HTML5 | 现代浏览器 |
| `&#8288;` (U+2060 WJ) | 禁止在此换行 | HTML 字符 | 现代浏览器 |
| `&nbsp;` | 不可换行空格 | HTML 字符 | 所有 |
| `white-space: nowrap` | 整段不换行 | CSS | 所有 |
| `word-break: keep-all` | 单词内不断（不要 `break-all`） | CSS | 所有现代 |
| `overflow-wrap: break-word` | 超长词允许换行 | CSS | 现代浏览器 |
| `line-break: strict` | 严格避头尾 | CSS | 现代浏览器 |
| `text-wrap: balance` | 多行均衡 | CSS | 现代浏览器（2024+） |
| `hyphens: auto` | 西文自动连字符 | CSS | 现代浏览器 |
## 七、InDesign / Word 中的断行设置
### InDesign
1. **关闭"连数字"**（默认开启会把"以防万一"中的"万一"误判数字）：
- 不打开任何文档 → 段落面板选项 → 关闭"连数字" → 影响所有新文档
2. **选用 Adobe CJK 单行书写器**（不是段落书写器）
- 段落书写器会把单行字距调整污染相邻行
3. **避头尾设置**：选"简体中文避头尾"，避头尾间断类型选"先推入"或"确定调整量优先级"
4. **段落面板"禁止断字"**勾选（默认开），破折号才不被拆
### Word
1. 段落对话框 → 中文版式
2. 勾选"允许标点溢出边界"
3. 勾选"按中文习惯控制首尾字符"
4. "首尾字符"选"标准"或"严格"
5. **注意**：Word 默认中文"后置标点"不包含 `U+2014`，破折号需要手动加入"自定义后置标点"
## 八、检查清单（断行相关）
排印完成前必过：
- [ ] 所有标题是否按词断、不在词中间硬断？
- [ ] 标题中"的"是否在行首？"和/与"是否在行末？
- [ ] 标题占行是否为正文行高整数倍？
- [ ] 大标题是否在正面页（横右页 / 直左页）？
- [ ] 数字 + 单位是否整组不分行？（用 `<span class="unit">` 或 `&#8288;`）
- [ ] 破折号、省略号是否未被中间拆开？
- [ ] 注释上标是否与被标记词紧贴？
- [ ] 段末是否有"孤字 + 标点"？
- [ ] 页首是否有"孤行"？
- [ ] URL / 邮箱是否在合理位置断（不加连字符）？
- [ ] CSS 是否用 `word-break: keep-all` 而不是 `break-all`？