排版与文本

排版与文本直接影响可读性、无障碍与品牌观感。CSS 通过 font-* 控制字体，通过 color、text-*、line-height 等控制文本呈现；颜色与背景的详细写法见颜色与背景。Web 字体加载与性能见字体优化策略。

字体

`font-family`（字体族）

浏览器按列表从左到右匹配本机已安装字体或已加载的 Web 字体；都不可用则使用对应通用族（serif、sans-serif、monospace 等）。

css

body {
    font-family:
        "Helvetica Neue",
        Helvetica,
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;
}

通用族	特点	常见用途
`serif`	衬线	长文、印刷感
`sans-serif`	无衬线	屏幕 UI、正文
`monospace`	等宽	代码、表格数字
`cursive` / `fantasy`	装饰	标题、艺术字

系统字体栈示例：system-ui, -apple-system, sans-serif（随操作系统变化）。

`font-size`（字号）

单位与选型详见字体单位。

正文推荐 rem（相对根元素 <html>），便于整体缩放与无障碍（用户调整浏览器默认字号时，若根字号用 % 或 rem 更易联动）。
浏览器默认根字号多为 16px；body { font-size: 1rem; } 即约 16px（在 html { font-size: 100%; } 时）。

`font-weight`（字重）

值	含义
`normal`	400
`bold`	700
`100`–`900`	数值字重（字体需含对应字重文件）
`lighter` / `bolder`	相对继承字重加减一档，不是固定 100/900

无对应字重时，浏览器可能合成粗体/斜体，效果因字体而异。

`font-style` / `font-variant`

font-style: italic | oblique：斜体（优先使用字体自带字形）。
font-variant: small-caps：小型大写字母（需字体支持）。

简写 font 可一次设置 font-style、font-variant、font-weight、font-size、line-height、font-family（注意顺序与必填项）。

文本样式

`color`（前景色）

设置文字颜色；与背景的对比度应满足无障碍要求（见颜色与背景 · 可访问性）。正文与背景对比度建议 ≥ 4.5:1（大号字 ≥ 3:1）。

`text-align`（对齐）

start / end：随书写方向（LTR/RTL）变化，优于硬编码 left/right 的场景。
left / right / center / justify：justify 可能拉大词间距，西文长段落需慎用。

`text-decoration`

现代写法可拆为 text-decoration-line、text-decoration-color、text-decoration-thickness 等。链接常设 text-decoration: none 或自定义下划线。

`text-transform`

uppercase / lowercase / capitalize 仅改变显示，不改变 DOM 文本与屏幕阅读器读出的原文（无障碍场景慎用全大写显示）。

`line-height`（行高）—— 阅读体验关键

表示行盒高度；推荐无单位倍数：line-height: 1.5 或 1.6（等于 1.5 × font-size），正文常用。
单行文本垂直居中：容器设固定 height，且 line-height 与 height 相等（仅适用于单行；多行请用 Flex 等）。

`letter-spacing` / `word-spacing`

字距与词距（词距主要影响以空格分词的语言）。

`text-shadow`

css

h1 {
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.3);
}

语法：水平偏移、垂直偏移、模糊半径、颜色（可多个阴影逗号分隔）。

单行省略（`text-overflow`）

需同时满足：限定宽度、overflow: hidden、white-space: nowrap，并设 text-overflow: ellipsis。

css

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行截断（标准属性 line-clamp，需配合 display: -webkit-box 等组合，详见 MDN）：

css

.excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

`writing-mode` 与逻辑属性

writing-mode: vertical-rl 等会改变行向与块向；与现代 CSS · 逻辑属性中的 margin-inline、padding-block 配合，可一套样式适配横排与竖排。

其他常用属性（简要）

white-space：是否换行、是否保留空格（nowrap、pre-wrap 等）。
word-break / overflow-wrap：长单词、URL 换行（中文站点常配合 break-all / anywhere）。
text-indent：首行缩进。

Web 字体（概要）

通过 @font-face 引入网络字体文件。加载阶段可能出现：

现象	说明
FOIT	阻塞期内文字不可见（依赖 `font-display` 与浏览器策略）
FOUT	先显示回退字体，自定义字体加载后替换，可能引发布局偏移（CLS）

优化要点（展开见字体优化）：

font-display: swap 等控制阻塞/交换周期。
优先 WOFF2，中文大库做子集化。
关键字体 <link rel="preload" as="font" crossorigin>（跨域字体必须 crossorigin）。
避免在 CSS 中用 @import 链式加载字体，优先 HTML <link> 或构建时合并。

总结

字体：font-family 回退栈 + 通用族；字号用 rem；注意 font-weight 是否有真实字重文件。
文本：优先无单位 line-height；省略号需三属性配合；对比度与 color 联动。
性能：Web 字体走字体优化流程。

参考文献

以下链接在编写时均可正常访问：

资料	说明
MDN：font-family	字体族与通用族
MDN：font-size	单位与 rem/em
MDN：line-height	行高与无单位用法
MDN：text-overflow	文本溢出
MDN：@font-face	Web 字体声明
W3C：CSS Fonts Module Level 4	字体规范（英文）
MDN：line-clamp	多行截断
MDN：writing-mode	书写模式