system-ui → 当前操作系统的界面字体（Windows 上是 Segoe UI，macOS 是 San Francisco，中文环境会自动接 PingFang / 微软雅黑）。
Georgia, "Songti SC", serif → 有衬线，标题或引文里用得多。
ui-monospace, Consolas, monospace → 等宽，代码必须有这一层，否则缩进会歪。
body {
font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
| 要点 | 说明 |
|---|---|
| 顺序 = 优先级 | 浏览器从左往右找第一个本机存在的字体，所以永远在末尾放 sans-serif/serif/monospace 兜底 |
| 带空格的名字要加引号 | "PingFang SC"；system-ui 这类关键字不加引号 |
| 中文务必写中文族 | 只写 Arial 时，中文会走浏览器的随机 fallback，不同机器字重表现差别很大 |
| 网络字体 | @font-face + font-display: swap（第十二章之外，见第二十章调试） |
12px 太小：正文最低建议 14px，可点击文本 16px 更稳
1rem（= 16px）是正文基准
1.125rem = 18px，长文正文常用
400 常规 600 半粗（中文比 bold 更耐看） bold
行高 1.2：标题、紧凑列表用。这行文字用来感受挤压。
行高 2：长段落需要更大呼吸，中文正文建议 1.7 左右——汉字没有西文的上伸下延，视觉上更显密。
/* 行高写无单位数字，继承时不会产生「倍数套倍数」的问题 */
p { font-size: 1rem; line-height: 1.7; }
/* font 简写顺序固定：style variant weight size/line-height family */
figcaption { font: italic 400 0.875rem/1.5 system-ui, sans-serif; }
letter-spacing .12em + uppercase：小标签、按钮文字
大标题用 -0.02em 收紧，字号越大越需要负字距
word-spacing 影响的是词与词之间的空（中文几乎没有词，主要作用于西文）
text-align: center
text-align: right
text-align: justify 两端对齐，最后一行保持左对齐。注意西文需要配合 hyphens，否则词间空隙会很夸张。
text-align-last: right 连最后一行也右对齐
下划线 + underline-offset ／ 波浪线（wavy） ／ 删除线 ／ 简写带粗细与颜色
a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* 老写法 text-decoration:none 仍在链接重置里最常见，但会去掉可识别性，谨慎全局使用 */
/* text-transform: uppercase / lowercase / capitalize 只改显示，不改 DOM 里的文本内容 */
white-space: pre → 保留 空格 与换行（代码块必须）
nowrap：这段很长很长很长很长很长很长很长很长很长，不会折行 → 溢出容器
超长字符串 https://example.com/very/long/path/that/never/ends 用 overflow-wrap: anywhere 强制打断
This is an extraordinarilylongwordthatneedshyphenation to fit inside a very narrow column of text.
| 属性 | 常用值 | 用途 |
|---|---|---|
white-space | normal / nowrap / pre / pre-wrap / break-spaces | 表格单元格防折行用 nowrap；保留用户输入的换行用 pre-wrap |
overflow-wrap | normal / break-word / anywhere | 只在单词放不下时才拆，治「长 URL 撑破卡片」 |
word-break | normal / break-all / keep-all | break-all 允许在任意字符处断行（中英混排有时需要）；keep-all 禁止中文断行 |
hyphens | auto（需 lang） | 西文连字符断词 |
tab-size | 数字 | pre 里 Tab 的宽度 |
单行省略号：这段标题非常长一直写到看不见为止才会出现省略号效果，配合 nowrap+overflow+text-overflow 三件套
多行截断：这段用 display:-webkit-box + -webkit-line-clamp，虽然带厂商前缀，但 Chrome/Safari/Firefox/Edge 全支持，事实标准。要写三行只改 -webkit-line-clamp 的数字即可。多出来的文字仍然在 DOM 里，可访问性与复制行为都要注意。
首字下沉：::first-letter 可以选中段落第一个字符并单独加样式，杂志排版常用。
::selection 可改选中文本的背景色，见第十七章伪元素。