letter-spacing 是控制单个字符间空隙的 CSS 属性，适用于字母、汉字、标点；设为 0 不等于无间距，normal 默认值因字体而异；负值可收紧但需防粘连；推荐用 px/em 单位，慎用于中文全局样式及表单元素。
用 letter-spacing 控制单个文字之间的空隙
html 里没有“字间距”这个独立属性，真正起作用的是 css 的 letter-spacing。它不是调字体大小，也不是调行高，专管字母、汉字、标点之间那个“看不见的缝隙”。
常见错误是以为设成 0 就等于“没间距”，其实默认值是 normal，不同字体渲染出来实际间隙可能不一致；设成负值（比如 -1px）会让字挤在一起，但别太狠，否则小字号下会粘连。
-
letter-spacing接受px、em、rem，推荐用px或em，避免用百分比（它不按字体大小比例缩放） - 对中文字体影响明显，但对某些等宽字体（如
monospace）可能视觉变化不大 - 不要在全局
body上乱设，容易让数字、英文单词断开异常（比如123变成1 2 3）
中文排版慎用 word-spacing
word-spacing 看似管“字间距”，其实只对“词”生效——而中文没有空格分词，浏览器基本靠空格或标点识别“词”。所以给中文段落设 word-spacing: 5px，大概率什么也不会变；但如果里面夹了英文或数字，那些部分反而会被撑开。
典型误用场景：想让标题每个汉字等距拉开，结果只看到英文链接被拉长，中文纹丝不动。
- 仅建议用于明确含空格分隔的文本，比如按钮文字
登 录（中间加了空格） - 和
letter-spacing混用时，两者效果叠加，容易失控 - 在 Flex 或 Grid 容器里，它可能被对齐方式覆盖，优先级不如
letter-spacing
内联元素（如 <span></span>）上设间距更安全
直接在 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或 <div> 上加 <code>letter-spacing，会影响所有子文本，包括里面的 <strong></strong>、<a></a> 甚至图标字体（比如 Font Awesome 的 <i></i>），导致图标错位或变形。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是包裹需要调整的部分，用 <span class="tight-text"></span> 单独控制。
- 示例：
<span style="letter-spacing: -0.5px">联系我们</span> - 避免对表单输入框（
<input>、<textarea></textarea>）设该属性，部分浏览器不支持或行为不一致 - 移动端 Safari 对小字号 + 负
letter-spacing渲染不稳定，测试时务必真机查看
字体本身带紧缩/宽松特性时，CSS 会叠加
有些字体（比如 Inter、HarmonyOS Sans）内置可变轴，支持 font-stretch 或可变字体权重调节，它们本身就在影响字符密度。此时再叠一层 letter-spacing，效果不是简单相加，而是渲染引擎混合处理，尤其在 Chrome 和 Safari 下表现可能不同。
容易被忽略的一点：用 WebFont 时，如果字体文件没加载完，浏览器先用系统字体 fallback，这时你写的 letter-spacing 还在，但参照的字体变了，视觉节奏就突然跳变。
- 关键文字（如 logo、品牌名）建议用 SVG 替代纯文本 + 间距，彻底规避渲染差异
- 做响应式时，别只在
px下调间距，配合@media给小屏幕减小letter-spacing值，防止窄屏下文字溢出 - 如果你在用 Tailwind，对应的是
tracking-tight/tracking-wider类，但注意它们底层仍是letter-spacing，同样受字体影响
