首行缩进与字母间距

首行缩进和字母间距是CSS中控制文本排版的常见属性，它们分别影响段落开头的视觉呈现和字符之间的空间分布。合理使用这些属性可以显著提升网页内容的可读性和美观度。

首行缩进的基本用法

text-indent属性用于设置段落首行的缩进量。正值产生缩进，负值则创造悬挂效果。这个属性只对块级元素的第一行有效。

p {
  text-indent: 2em;  /* 首行缩进2个字符宽度 */
}

实际应用中，中文排版通常采用2em的缩进量，因为一个汉字宽度正好是1em。对于混合文字内容，这个值也能保持较好的视觉效果。

首行缩进的进阶技巧

负缩进配合内边距可以实现悬挂缩进效果：

.hanging-indent {
  padding-left: 2em;
  text-indent: -2em;
}

多级缩进时需要注意继承问题。下面的示例展示了如何为不同层级的列表设置递进缩进：

ul { padding-left: 0; }
li { text-indent: 1em; }
li li { text-indent: 2em; }
li li li { text-indent: 3em; }

响应式设计中，可以使用相对单位确保缩进适应不同屏幕尺寸：

@media (max-width: 768px) {
  p {
    text-indent: 1em;  /* 小屏幕减少缩进量 */
  }
}

字母间距的详细解析

letter-spacing属性控制字符间的额外空间，可以接受正值（增加间距）或负值（收紧间距）。这个属性会应用于元素内的所有文本内容。

.tight {
  letter-spacing: -0.05em;  /* 紧凑排版 */
}
.spacious {
  letter-spacing: 0.1em;    /* 宽松排版 */
}

字母间距的实际应用

标题文字经常需要调整字母间距来增强视觉效果：

h2 {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

中文场景下，较小的正值间距可以改善可读性：

.chinese-text {
  letter-spacing: 0.05em;  /* 适合中文的微调 */
}

动态效果可以通过过渡实现平滑变化：

.button {
  letter-spacing: normal;
  transition: letter-spacing 0.3s;
}
.button:hover {
  letter-spacing: 0.1em;
}

组合使用的注意事项

同时使用首行缩进和字母间距时，需要注意它们的相互影响。例如：

.special-paragraph {
  text-indent: 2em;
  letter-spacing: 0.05em;
}

在响应式布局中，可能需要根据断点调整这两个属性：

@media (max-width: 480px) {
  .responsive-text {
    text-indent: 1em;
    letter-spacing: 0.02em;
  }
}

浏览器兼容性与性能

现代浏览器对这两个属性的支持都很完善，但在极旧版本中可能存在差异。性能方面，频繁修改这些属性会导致重绘，动画中应谨慎使用：

/* 不推荐的性能写法 */
.animated-text {
  transition: all 0.3s;  /* 会包含不必要的属性 */
}
/* 推荐的性能写法 */
.animated-text {
  transition: letter-spacing 0.3s;
}

排版美学实践

西文字体设计中，特定字重可能需要补偿性间距：

.bold-text {
  font-weight: 700;
  letter-spacing: -0.02em;  /* 补偿粗体字的重叠 */
}

诗歌排版往往需要特殊的缩进处理：

.poem-line {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

表格数据中的数字列通常需要等宽字体配合特定间距：

.number-column {
  font-family: monospace;
  letter-spacing: 0.1em;
}

可访问性考量

过大的字母间距会影响阅读障碍用户的体验。WCAG建议字母间距不超过0.12em：

.accessibility-text {
  letter-spacing: 0.1em;  /* 安全范围内的最大值 */
}

高对比度模式下，调整间距可能影响文本换行，需要额外测试：

.high-contrast-text {
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}