在网页排版过程中，文字间距的调整直接影响内容的可读性和页面的美观度，HTML本身没有直接的属性控制文字间距，需要结合CSS的letter-spacing属性来实现字距的精准控制，该属性可以设置字符之间的额外间距，适用于各类文本元素的排版优化。
letter-spacing基础语法
letter-spacing是CSS中用于设置字符间距的属性，其基础语法格式如下：
/* 基础语法 */
selector {
letter-spacing: 取值;
}
该属性可以作用于所有包含文本内容的HTML元素，比如<p>、<h1>到<h6>、<span>、<div>等，设置后会统一调整元素内所有字符的间距。
letter-spacing常用取值
letter-spacing支持多种取值类型，不同取值对应不同的间距效果，具体说明如下：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| normal | 默认值，使用浏览器默认的字符间距，等同于设置为0 | letter-spacing: normal; |
| 长度值 | 可以是正数、负数或0，支持px、em、rem等单位，正数增加间距，负数缩小间距 | letter-spacing: 2px; |
| inherit | 继承父元素的letter-spacing属性值 | letter-spacing: inherit; |
实际使用示例
基础字距调整
给段落文本设置2px的额外字符间距，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字间距示例</title>
<style>
.text-spacing {
letter-spacing: 2px;
font-size: 16px;
}
</style>
</head>
<body>
<p class="text-spacing">这是一段设置了字符间距的文本内容，字符之间会比默认状态更宽松。</p>
</body>
</html>
标题字距优化
对于标题类元素，适当缩小字距可以让标题更紧凑美观，比如设置-0.5px的间距：
h2 {
letter-spacing: -0.5px;
font-weight: bold;
}
响应式字距设置
结合em单位可以实现随字体大小变化的自适应字距，适合响应式页面：
.responsive-text {
font-size: 1rem;
letter-spacing: 0.1em; /* 间距为字体大小的10% */
}
/* 字体变大时间距同步变大 */
@media screen and (min-width: 768px) {
.responsive-text {
font-size: 1.2rem;
}
}
注意事项
- letter-spacing设置的间距是额外添加到默认字符间距上的，不是替换默认间距。
- 负数取值不能让字符间距小于字体本身的最小间距，不同字体有不同的最小间距限制。
- letter-spacing和<code>word-spacing</code>属性不同，前者控制字符间距，后者控制单词之间的间距，不要混淆使用。
- 如果元素内同时设置了<code>direction</code>为rtl（从右到左排版），letter-spacing的效果方向也会对应调整。
需要注意的是，letter-spacing属性会被子元素继承，如果不需要子元素继承该属性，可以在子元素中单独设置letter-spacing为normal或者需要的其他值。
HTMLletter-spacing文字间距字距控制CSS修改时间：2026-07-18 21:36:21