用 letter-spacing 是拉开两个字距离最常用且可控的方式，它作用于文字内部、兼容中英文混排、不触发重排；需注意负值压缩、正值扩大，建议用整数px值并避开字体特性干扰。

用 letter-spacing 拉开两个字的距离

直接改字间距是最常用也最可控的方式。它作用于文字内部，对两个汉字、中英文混排都有效，且不会破坏行内布局或触发重排问题。

常见错误是以为 margin 或 padding 能用在单个字上——不行，它们只对块级或行内元素整体生效，而单个汉字不是独立 DOM 节点。

• letter-spacing 值支持 px、em、rem，比如 letter-spacing: 8px
• 负值会让字“挤在一起”，正值才“隔远”，但别设太大（超过 20px 容易影响可读性）
• 注意：它会影响整个元素内的所有文字，如果只想调两个字，得把它们单独包一层 <span></span>

<span style="letter-spacing: 12px">你好</span>

为什么不用   或多个空格

很多人试过在两个字中间加   或敲空格，结果发现没用——HTML 默认会把连续空白字符合并成一个空格。

即使写成    ，效果也不稳定：字体渲染、行高、字号变化时，视觉间距会漂移；而且语义上，这根本不是“字间距”，而是“插入不可见字符”。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• 响应式页面里，  的实际像素宽度会随字体缩放而变，不如 letter-spacing 精确
• 屏幕阅读器可能把   当作停顿处理，影响无障碍访问
• 如果父容器用了 text-align: justify，额外空格还可能被拉伸，造成意外错位

遇到 font-feature-settings 或 Web 字体时的干扰

某些字体（尤其是中文可变字体或启用了 OpenType 特性的）会覆盖 letter-spacing 行为，表现为：设了值但没反应，或者间距忽大忽小。

这不是 bug，是字体本身控制了字偶距（kerning）和字间距（tracking）优先级。这时候得手动关掉干扰项：

• 加 font-feature-settings: "kern" 0, "liga" 0 关闭自动字偶调整
• 确保没有全局 CSS 重置了 letter-spacing（比如某些 UI 库设了 letter-spacing: normal）
• 用浏览器开发者工具检查 computed 样式，确认最终生效的是你写的值，而不是继承来的 normal

移动端 Safari 和旧 Android WebView 的兼容细节

letter-spacing 本身兼容性极好，但 iOS 9–12 和部分国产安卓 WebView 对小数值（如 0.5px）渲染不准，可能出现“有时生效、有时忽略”的现象。

• 稳妥起见，移动端建议用整数 px 值，比如 4px、6px，避开 0.2em 这类相对单位
• 如果必须用 em，记得测试不同字号下的实际像素表现——0.1em 在 14px 字体下只有 1.4px，很多老引擎直接舍入为 0
• 不要依赖 text-indent 替代，它只缩进第一行首字，对两个字之间的间隙完全无效

要让两个字隔远一点，核心就是控制 letter-spacing，但得盯住字体特性、单位精度和渲染上下文——这些地方一松懈，视觉效果就容易“看起来设了，其实没动”。