bootstrap 5 不提供 letter-spacing 工具类，需自定义 css 添加如 .ls-1、.ls-2 等类，并优先使用 em 单位；注意继承覆盖、中英文混排差异及多设备缩放适配。
Bootstrap 5 本身不提供 letter-spacing 工具类
Bootstrap 5 的排版工具类（如 .text-uppercase、.fs-4、.fw-bold）覆盖了大小写、字号、字重等常见需求，但**没有内置 ls-1、letter-spacing-sm 这类字间距辅助类**。官方 CSS 源码中也未定义任何以 letter-spacing 为属性名的 utility 规则。
这意味着：你不能靠 Bootstrap 原生类直接写 <h1 class="ls-2">标题</h1> 来生效——它不会起作用。
常见误操作包括：
- 在 Bootstrap 文档里搜索 “letter spacing” 或 “ls”，结果为空，误以为自己漏看了
- 复制其他 UI 库（如 Tailwind）的写法，粘贴进 Bootstrap 项目却无效果
- 试图用
.text-center或.fw-normal等类“凑出”字距效果，徒劳
手动添加 letter-spacing 类最稳妥
推荐在自定义 CSS 中补充一组轻量级工具类，例如：
.ls-0 { letter-spacing: 0; }
.ls-1 { letter-spacing: 0.02em; }
.ls-2 { letter-spacing: 0.05em; }
.ls-n1 { letter-spacing: -0.02em; }
.ls-tight { letter-spacing: -0.03em; }
.ls-loose { letter-spacing: 0.1em; }
这样就能直接用：<h2 class="display-4 ls-2">品牌标语</h2>。
注意几个关键点：
- 优先用
em单位（如0.02em），避免像素值导致小字号下字距突兀 - 负值慎用，中文建议不超过
-0.03em，英文大写标题可到-0.05em，再低易重叠 - 别把类名起成
ls-px或ls-2px——固定像素单位在缩放或响应式场景下会失准 - 如果项目已用 Sass，可基于 Bootstrap 的
$spacers思路，定义$letter-spacingsmap 并循环生成
与 Bootstrap 标题类（如 .display-3）共用时的继承陷阱
Bootstrap 的 .display-* 类本身不含 letter-spacing，但如果你在父容器（比如 <header></header>）上写了 style="letter-spacing: 0.05em"，那么所有子元素（包括 .display-4 文字）都会继承这个值——哪怕你单独给标题加了 ls-n1，也可能被父级覆盖。
排查方法：
- 打开浏览器开发者工具，选中标题元素，在 Styles 面板里看
letter-spacing是否被划掉（表示被更高优先级规则覆盖） - 检查是否误在
body或html上全局设置了letter-spacing - Bootstrap 的
.text-uppercase会放大视觉字距感，叠加letter-spacing容易过宽，建议二者不同时使用
用 <span></span> 精控局部字距比改全局更安全
当只需微调某几个词（比如英文缩写 W3C、品牌名中的特定字母），不要动整个标题的 letter-spacing，而是用内联 <span></span> 包裹并单独设样式：
<h1 class="display-3">前端开发 <span style="letter-spacing: 0.1em">W3C</span> 标准</h1>
这种写法的好处：
- 完全绕过继承污染问题
- 不影响
ellipsis截断逻辑（全局设letter-spacing可能导致省略号位置偏移） - 中英文混排时可分别控制：中文用
0.02em，英文缩写用0.08em - 语义清晰，后续维护者一眼看出是刻意设计，而非误配
真正容易被忽略的是：字距调整不是“越明显越好”，而是在字体渲染、DPI、可访问性缩放三者之间找平衡点。一个在 MacBook Retina 屏上看刚好的 0.05em，在 Windows 125% 缩放下可能就松散得断气了——所以务必在真实设备上验视。
