letter-spacing不能替代 ，因为它只改变渲染间距而不生成真实空格字符； 是不可断行的空白字符，可被DOM解析、JS读取并参与文本流布局，影响复制粘贴、textContent长度、SEO和屏幕阅读器识别。
letter-spacing 为什么不能替代 ？
因为 letter-spacing 只改变渲染间距，不生成真实空格字符；而 是一个不可断行的空白字符，会被 DOM 解析、可被 JS 读取、能参与文本流布局（比如换行控制、表单提交值）。你在 innerText 里取不到 letter-spacing 拉出来的“空”，但能拿到 —— 这点在需要语义化处理或服务端解析 HTML 片段时特别关键。
常见错误现象： Hello H e l l oHello，中间没空格；而
-
letter-spacing不影响文本长度计算（el.textContent.length不变） -
textContent.length，每个占 1 个字符位 - SEO 和屏幕阅读器对
letter-spacing完全无感知
什么时候该用 ，什么时候该用 letter-spacing？
看目标：要「结构上存在空」就用 ；要「视觉上拉开距离」就用 letter-spacing。两者不是互斥，而是分工明确。
使用场景举例：
- 按钮文字中强制分隔：
—— 防止小屏下“确认”两字被挤成一团，且保留语义完整性 - 标题字符微调呼吸感：
联系我们
- 表格列头对齐英文缩写：
ID ID看起来像连笔字，又不污染数据 - 邮件模板中兼容 Outlook：必须用
font-size: 0+ 内联letter-spacing，禁用 margin/padding
letter-spacing 和 混用会出什么问题？
容易造成间距叠加失控，尤其在响应式或字体切换场景下。比如给一个含多个 的元素再加 letter-spacing: 2px，结果是「字符间 + 空格字符本身宽度 + 渲染额外间隙」三重膨胀，移动端可能直接撑破容器。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型误用：
-
名 称→ 实际显示比预期宽近一倍 - 在已用
pre标签保留空格的代码块里再加letter-spacing，导致等宽字体错位 - 对包含
input[value]设置letter-spacing，Safari 旧版可能让光标定位偏移
调试建议：遇到间距异常，先临时移除所有 letter-spacing，只留 看基线；再逐步加回，用浏览器开发者工具的「Computed」面板确认最终生效值。
邮件和 Webview 中 letter-spacing 的兼容性陷阱
Outlook 桌面版（尤其是 Windows 365/2019）几乎忽略所有 letter-spacing，但支持 和内联 font-size 控制。iOS Webview（如微信内置浏览器）对小数 em 值（如 0.025em）存在舍入误差，表现为某些字号下完全不生效。
实操建议：
- 邮件模板中：放弃
letter-spacing，改用font-size: 0占位 + 显式display: inline-block; width: 8px;模拟间隙 - 需兼容 iOS Webview：用
letter-spacing: 0.03em而非0.025em，避免被舍入为 0 - 不要依赖
normal值——不同字体默认字距差异大，Noto Sans CJK 和 PingFang SC 的normal可能差 0.4px
最易被忽略的一点：当父元素设了 font-feature-settings: "kern" 关闭字距时，letter-spacing 的视觉效果会显著放大，因为原本靠字体内置 kerning 补偿的间隙没了，全靠你手动加——这时候反而该减小值，而不是加大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
