Bootstrap 中 letter-spacing 有效但需避开 .form-control、.btn 等交互组件；优先用于纯文本容器，单位用 em 适配响应式，禁用负值，叠加 text-stroke 时需减小间距补偿。
Bootstrap 中直接用 letter-spacing 有效，但别写在 .form-control 或 .btn 上
bootstrap 默认没封禁 letter-spacing，你加它就生效，但得避开某些组件的内部渲染陷阱。比如给 <input class="form-control"> 直接设 letter-spacing: 0.05em，光标定位可能偏移、选中文本时出现虚线错位——尤其在 safari 和旧版 chrome 中。同理，.btn 加了较大正向间距后，文字可能撑出按钮边界，又不触发自动换行。
实操建议：
- 优先作用于纯文本容器：如
<h1 class="text-center">、<p class="lead">、<div class="card-title"> - 避免对表单控件、按钮、徽章（
.badge）等交互元素全局设置letter-spacing - 若真需微调输入框内文字，改用
font-feature-settings: "kern"配合固定font-size和line-height，比硬拉间距更稳
中英文混排时，letter-spacing 用 em 不要用 px
Bootstrap 响应式字体（如 h1 { font-size: calc(1.375rem + 1.5vw) }）会让 px 单位的字间距在不同屏幕下失配：小屏时 1px 太重，大屏时又不够。而 em 是相对于当前 font-size 的，能随字号缩放。
常见错误现象：导航栏菜单文字在手机上挤成一团，桌面端却松散断开。
实操建议：
- 正文统一用
letter-spacing: 0.04em，标题用0.08em，品牌名可用1px（因字号固定） - 英文主导区域（如
.navbar-nav .nav-link）单独设更小值：letter-spacing: 0.02em - 禁用负值对
<small>或.text-muted类——12px 下-0.02em已接近视觉粘连临界点
用独立 CSS 文件覆盖 Bootstrap，别改源码或内联 style
Bootstrap 官方 CSS 文件里没定义 letter-spacing（除极个别 demo 类），所以你自定义的规则只要加载顺序在它之后，就能干净覆盖。硬塞 style="letter-spacing: 0.06em" 到 HTML 标签里，既难维护，又无法响应式断点切换。
性能影响很小，但兼容性要注意：IE 完全支持 letter-spacing，但老安卓 WebView（≤4.4）对 em 单位解析有偏差，建议 fallback 到 px（仅限基础文本）。
实操建议：
- 在 HTML
<head>中，把自定义 CSS 放在bootstrap.min.css之后 - 写法示例：
h1.display-4 { letter-spacing: 0.08em; } @media (max-width: 768px) { h1.display-4 { letter-spacing: 0.04em; } } - 不要试图用
!important强顶——99% 场景靠选择器权重就够了，比如.navbar-brand h1比单纯h1优先级高
letter-spacing 和 text-stroke 叠加时，必须调小间距补偿视觉膨胀
加描边后文字“看起来变粗变宽”，哪怕 font-size 没变。这时若还维持原 letter-spacing，标题容易在窄容器里意外换行，或卡片内文字顶到右边界。
这不是 Bug，是浏览器渲染逻辑：描边虽不参与盒模型计算，但实际像素占位增加。Safari 尤其明显。
实操建议：
- 启用
-webkit-text-stroke后，把对应元素的letter-spacing减 0.01–0.02em - 例如：
.text-stroked { -webkit-text-stroke: 1px #333; letter-spacing: calc(0.06em - 0.015em); } - 别依赖
box-sizing补救——它对文字描边无效；真正管用的是提前预留空间或微调间距
Bootstrap 的字间距定制本质是 CSS 层叠控制，不是框架功能开关。最易被忽略的是：中文字体本身字偶距（kerning）缺失，letter-spacing 起效快但治标；长期项目该配合 font-feature-settings: "kern" 和 OpenType 字体优化，否则调来调去还是觉得“差点意思”。
