letter-spacing 是 css 属性而非 html5 属性，自 css1 起存在，用于精确控制字符间水平间距，支持 px/em/rem 等单位，可正可负，具继承性，需配合字体与设备实测确保渲染一致。
letter-spacing 是你在 index.html 中控制字符间距离最直接有效的 CSS 属性，不需要 JS、不依赖框架，纯 HTML + 内联或外部样式就能生效。
用 letter-spacing 设置字间距（不是行距）
它只影响「同一个元素内相邻字符之间的水平空隙」，和 word-spacing（词间距）、line-height（行高）完全无关。常见误用是拿它调行距，结果没反应——那是属性用错了。
- 支持单位：像素（
px）、em（em）、rem（rem）、百分比（%），但不推荐用%，计算逻辑易出错 - 负值合法：
letter-spacing: -0.5px可轻微收紧字体，适合标题微调；但别设太小（如-2px），小字号下会粘连 - 继承性：默认继承父级，所以通常建议写在具体文本容器上（如
<p class="tight-text"></p>），而非全局body
内联 style vs 外部 CSS 的实际差异
内联写法快，但难复用、难维护；外部 CSS 更可控。两者效果一致，但优先级不同：
- 内联：
<p style="letter-spacing: 2px">欢迎来到首页</p>—— 优先级最高，适合临时调试 - 类选择器：
.hero-title { letter-spacing: 1.5px; }—— 推荐用于重复使用的标题、按钮文字 - 注意：如果用了 CSS 框架（如 Bootstrap），它的
.text-uppercase等类可能自带letter-spacing，要检查 computed styles 覆盖关系
移动端适配时容易被忽略的点
在 iOS Safari 或 Android Chrome 上，letter-spacing 对中文字体（如 "PingFang SC"、"Noto Sans CJK"）的效果常比英文弱，甚至不明显——这不是 bug，是字体渲染机制决定的。
- 验证方式：打开 DevTools → Elements → 查看该元素的
computed标签页，确认letter-spacing值是否被应用且未被覆盖 - 若中文字体没反应，可尝试加
text-rendering: optimizeLegibility;（仅对部分字体有效，别滥用） - 避免用
letter-spacing替代排版结构：比如想让导航菜单字母拉开，不如用display: flex+gap控制子项间距，更稳定
真正麻烦的从来不是写上 letter-spacing，而是它在不同字体、不同浏览器、不同字号下的渲染一致性——多测几个真实设备，比查文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
