CSS 字体排版属性深入

CSS字体排版：letter-spacing字间距/word-spacing词间距/line-height行高(数值=乘数/百分比)/text-indent首行缩进/text-align-last最后一行对齐/vertical-align垂直对齐(text-top/text-bottom/middle/sub/super/具体长度)/font-kerning字距调整/ hanging-punctu · 难度：入门 · +10XP

CSS 文字排版细节 —— letter-spacing、word-spacing、text-indent

排版不只是选字体和字号，字间距、词间距、段落缩进这些细节决定了文字的阅读体验。

letter-spacing —— 字间距

.title { letter-spacing: 2px; }      /* 加宽，适合标题 */
.compact { letter-spacing: -0.5px; }  /* 紧凑 */

word-spacing —— 英文词间距

.english-text { word-spacing: 3px; }

text-indent —— 首行缩进

.paragraph { text-indent: 2em; }  /* 首行缩进两个字符 */

动手练习

1. 基础练习：给标题加letter-spacing:3px，观察大标题的视觉变化。
2. 进阶应用：给所有段落加text-indent:2em实现中文排版规范的首行缩进。
3. 项目实战：优化网站的文章排版——标题加字间距、正文首行缩进、英文词间距调整。