letter-spacing是唯一能直接精准控制字符间水平空隙的css属性；它对中英文字符均生效，但需注意单位选择（小字号用em、大标题可用px）、避免混排失控、防范渲染限制与样式覆盖。
letter-spacing 是唯一能直接、精准控制字符间水平空隙的 CSS 属性，但“实现文字排版间距调整”不等于全靠它——line-height 控制行内垂直节奏，word-spacing 只对空格分隔的“词”生效，三者职责分明。用错地方，比如给中文段落设 word-spacing，基本没反应。
为什么设了 letter-spacing 却看不见效果
不是代码写错了，而是被渲染限制或样式覆盖卡住了：
- 父容器用了
white-space: nowrap且宽度不足 → 字符被挤出视口，DevTools 里Computed显示值正常，但人眼看不到 - 用了 WebFont，但字体文件未加载完成，浏览器 fallback 到 SimSun 等系统字体 → 这些字体 kerning 表缺失，
letter-spacing只能微调，救不了底子 - 样式被后加载的 CSS 覆盖 → 打开 DevTools 的
Computed面板，确认letter-spacing是否被划掉（crossed out） - 在
<input>或<textarea></textarea>上硬套 → Safari（尤其 iOS 16–17）基本不支持，Chrome 也仅部分生效，应避免
letter-spacing 该用什么单位才靠谱
单位选错，响应式就失效；单位太激进，小字号下直接糊成一团：
- 小字号文本（≤14px），比如移动端正文：用
em，例如letter-spacing: 0.03em—— 它随font-size等比缩放，不会在 12px 下过松、16px 下又看不见 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.5px，但别超 2px，否则易撑破容器 - 全局节奏统一场景：用
rem，但必须确保:root { font-size: 16px; }明确定义，否则动态改根字号时会失控 - 禁用百分比（
%）：规范不支持，浏览器直接忽略；禁用无单位数值（如0.1）：会被解析为0.1px，多数浏览器舍入为 0
中英文混排时怎么不让一边松、一边紧
同一个 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，强行统一只会让设计稿验收翻车：
- 别依赖
:lang(en)—— 它依赖 HTML 的lang属性，且对内联英文片段（如按钮里的 “NEW”）常不生效 - 推荐显式包裹：
<span class="lang-en">Contact</span><span class="lang-zh">联系我们</span>，再分别设.lang-en { letter-spacing: 0.05em; }和.lang-zh { letter-spacing: 0.02em; } - 注意继承性：
section { letter-spacing: 0.02em; }会让内部所有<strong></strong>、<i></i>也带这个值，需主动重置：section strong { letter-spacing: normal; } - 慎用负值收紧中文：12–14px 下临界点极低，-0.5px 就可能粘连，-1px 在真机 Safari 上极易渲染异常
真正难调的从来不是单个属性，而是它在继承链、字体加载状态、容器约束和浏览器兼容性之间的交叠。哪怕只改一行 letter-spacing，也得先看 Computed 面板里它是否真的生效，再查父级有没有 white-space 或 text-rendering 干扰，最后拿 iOS Safari 真机跑一遍——这些步骤漏掉任何一环，都可能让调整归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
