首行缩进与字母间距

在网页设计中，首行缩进和字母间距是控制文本排版的常见需求。首行缩进常用于段落开头，而字母间距则影响文本的整体视觉效果。两者通过CSS实现，但具体应用场景和细节处理需要特别注意。

首行缩进的基本用法

首行缩进通过text-indent属性实现，单位为px、em或百分比。例如，以下代码将段落首行缩进2个字符：

p {
  text-indent: 2em;
}

em单位基于当前字体大小，因此2em表示缩进两个字符宽度。若使用固定像素值：

p {
  text-indent: 32px;
}

百分比值基于父元素宽度，可能不适用于文本缩进：

p {
  text-indent: 10%; /* 不推荐用于文本缩进 */
}

首行缩进的进阶技巧

首行缩进可与伪元素结合实现特殊效果。例如，首行添加引导符：

p::first-line {
  text-indent: 1em;
  color: #666;
}

负缩进实现悬挂缩进效果：

p {
  padding-left: 2em;
  text-indent: -2em;
}

响应式设计中，缩进值可能需要随屏幕尺寸调整：

@media (max-width: 768px) {
  p {
    text-indent: 1em;
  }
}

字母间距的详细控制

字母间距通过letter-spacing属性控制，单位通常为px或em。基本用法：

h1 {
  letter-spacing: 2px;
}

负值让字母更紧凑：

h2 {
  letter-spacing: -0.5px;
}

em单位相对当前字体大小：

p {
  letter-spacing: 0.1em;
}

字母间距的实际应用

大标题常用较大字母间距提升可读性：

.title {
  letter-spacing: 4px;
  font-size: 2.5rem;
}

小字号文本适当增加间距：

.small-text {
  letter-spacing: 0.8px;
  font-size: 12px;
}

全大写字母需要额外间距：

.uppercase {
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

组合使用示例

首行缩进与字母间距可组合使用：

.article {
  text-indent: 2em;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

特殊排版效果：

.poem {
  text-indent: -1.5em;
  padding-left: 1.5em;
  letter-spacing: 0.8px;
}

浏览器兼容性注意事项

旧版IE对text-indent的百分比支持不一致：

/* IE8及以下需要hack */
p {
  text-indent: 2em;
  *text-indent: 0;
}

移动端浏览器对极小字母间距的处理差异：

/* 避免在移动设备上过小间距 */
@media (hover: none) {
  body {
    letter-spacing: 0.3px !important;
  }
}

性能优化建议

频繁改变字母间距可能触发重排：

// 避免动画中连续修改letter-spacing
element.style.letterSpacing = `${value}px`; 

首行缩进对性能影响较小，但大量使用可能增加布局计算时间。