CSS中，字符间距主要通过letter-spacing属性控制，用于调整文本中字符间的水平间距，该属性支持长度值（如px、em、rem）和关键字normal（默认值），正值增大间距（如letter-spacing: 2px），负值则缩小间距（如letter-spacing: -1px），常用于标题装饰、特殊文本排版等场景，能提升视觉层次感，需注意，负值可能导致字符重叠，影响可读性，建议根据字体和设计需求合理调整。
CSS字符间距：精雕细琢文本排版的隐形艺术
在网页设计的宏大叙事中,文本是承载信息与情感的基石，而字符间距——这个常被忽视的排版细节，却如同一支无形的画笔，深刻影响着文本的可读性、视觉节奏与整体设计风格，无论是标题的醒目宣言，还是正文的娓娓道来，恰到好处的字符间距能让文字“呼吸”，赋予页面独特的韵律感与高级感，本文将深入解析CSS中掌控字符间距的核心属性letter-spacing，从基础原理到实战技巧，助你掌握这门提升文本魅力的“隐形艺术”。
何为字符间距？为何它举足轻重？
字符间距（Letter Spacing），在CSS中由letter-spacing属性精准定义，指的是**文本行内相邻字符（包括字母、数字、汉字、标点及空格）之间的水平间距**，其取值可以是像素（px）、em、rem等长度单位，亦可采用默认的关键词normal（由浏览器根据字体与语言自动计算）。
或许有人质疑：“调整几像素的间距，效果真能显著吗？”实践证明，字符间距的作用远超想象：
- 优化可读性，减轻视觉负担：字符过于密集易引发视觉疲劳，间距过小则可能导致字符粘连（尤其在等宽字体、小字号文本或数字密集处），合适的间距能有效区分字符边界，提升阅读流畅度。
- 塑造设计风格，传递情绪氛围：宽松的间距常用于标题、海报文字，营造大气、现代、疏离的科技感或艺术感；紧凑的间距则能打造精致、利落、集中的品牌标识（如LOGO、品牌名）。
- 适配多元场景，解决排版难题：德语长单词、中英文混排等特殊场景，常需动态调整间距以避免因字符长度差异导致的排版失衡或视觉混乱。
核心属性：letter-spacing全解析
letter-spacing是CSS中专门控制字符间距的属性，其语法简洁却功能强大。
语法与取值详解
letter-spacing: normal | <length>;
normal：默认值，浏览器会根据字体类型、语言特性等因素自动计算间距（通常为0，但部分字体可能内置微调间距）。<length>：指定精确间距值，支持多种单位：- 绝对单位：
px（像素，固定值，不受字体大小变化影响）、pt（点，1pt ≈ 1.333px，常用于印刷设计）。 - 相对单位：
em（相对于当前元素的字体大小，如1em表示字体大小的10%）、rem（相对于根元素<html>的字体大小，是响应式设计的优选）。
- 绝对单位：
正值、负值与“0”的微妙差异
-
正值（增加间距）：字符“疏远”，创造呼吸感，常用于标题、装饰性文本。
h1 { letter-spacing: 3px; } /* 标题字符间距增加3像素 */效果：
H E L L O（字符间空隙显著）。 -
负值（减少间距）：字符“靠近”，营造紧凑感，需谨慎使用，避免字符重叠影响识别。
.brand-name { letter-spacing: -0.05em; } /* 品牌名适度收紧 */注意：负值对大字号、复杂字体或小字号文本风险较高，务必测试可读性。
-
0：字符紧密排列，无额外间距，适用于需要极致紧凑感的场景（如密集数据展示）。code { letter-spacing: 0; } /* 代码块取消默认间距 */
letter-spacing vs word-spacing：一字之差，天地之别
初学者常将两者混淆,其核心区别在于作用范围：
letter-spacing：作用于**所有相邻字符**，包括字母、数字、汉字、标点、空格本身，它影响的是微观层面的字符关系。word-spacing：仅作用于**单词之间的空格**（对中文等无空格分隔的语言无效），它影响的是宏观层面的词语间距。
.multi-lingual {
letter-spacing: 0.5px; /* 微调所有字符间距 */
word-spacing: 1.5em; /* 显著增加英文单词间距 */
}
效果（英文）：H e l l o W o r l d（字母间细微空隙，单词间显著空隙）；效果（中文）：字符 间距（仅影响空格本身，对汉字间距无影响）。
实战应用：从标题到响应式布局
构建视觉层次：标题间距的艺术
是页面的“视觉焦点”，通过字符间距可强化其存在感与风格属性：
h1 {
font-size: clamp(2rem, 5vw, 3.5rem); /* 响应式字号 */
letter-spacing: clamp(0.05em, 0.1em, 0.15em); /* 响应式间距 */
font-weight: 300; /* 细体字 + 宽松间距 = 现代感 */
}
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: 0.05em; /* 中等间距，平衡正式感与可读性 */
font-weight: 500;
}
效果：大
