index.html里文字的字母间距如何设置

letter-spacing用于控制所有字符间间距，支持正负值及normal，可继承但可被子元素覆盖；应与word-spacing区分，响应式推荐em/ch单位，避免内联样式和rem，注意iOS Safari负值渲染偏差。

用 letter-spacing 控制字母间距

直接在 CSS 里设 letter-spacing 就行，它作用于所有文本节点，包括中文、英文、数字和标点。值可以是正数（拉开）、负数（收紧）或 normal（浏览器默认，通常为 0）。

常见写法：

h1 {  letter-spacing: 2px;}p.subtitle {  letter-spacing: -0.5px;}

注意：该属性不继承自父元素，但你可以在父容器上设置，子文本会自动应用（因为默认继承）。如果子元素显式设置了 letter-spacing，就会覆盖父级。

letter-spacing 和 word-spacing 别混用

letter-spacing 拉的是每个字符之间的空隙，word-spacing 只影响单词之间的空格（对中文基本无效，因中文无空格分词）。

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

• 给英文标题加呼吸感 → 用 letter-spacing
• 想让「Hello World」两个单词离远点 → 用 word-spacing
• 给中文标题“产品介绍”加间距 → 仍用 letter-spacing，每个汉字间都会插入间隙

误用 word-spacing 处理中文或单个字母时，几乎看不到效果。

响应式场景下慎用固定像素值

写死 letter-spacing: 2px 在小屏上可能显得过松，大屏又不够明显。更稳妥的方式是用相对单位：

• letter-spacing: 0.05em —— 相对于当前字体大小，缩放友好
• letter-spacing: 0.1ch —— 基于 “0” 字符宽度，适合等宽字体场景
• 避免用 rem，它依赖根字号，而字母间距应随本元素字号变化

另外，iOS Safari 对负值 letter-spacing 渲染偶尔有微小偏移（尤其配合 transform: scale() 时），若做高精度排版，建议在真机上验证。

内联样式 or 外部 CSS？优先选后者

不要在 <h1 style="letter-spacing: 1px"> 这样写——维护困难，且无法复用。哪怕只改一处，也建议抽成 class：

<h1 class="title-tight">紧凑标题</h1>

然后统一管理：

.title-tight {  letter-spacing: -0.3px;}

特别注意：某些 UI 框架（如 Bootstrap）的 .text-uppercase 类会隐式改变字重和渲染行为，叠加 letter-spacing 后可能让小写字母变模糊，这时候要手动重置或用 font-variant-caps: small-caps 替代。