css字体间距如何调整：分清两类属性

css字体间距如何调整，主要依靠letter-spacing控制单个文字之间的横向间距，word-spacing控制单词之间的空隙，line-height控制文字行与行的纵向间距，letter-spacing支持正值拉开文字、负值收紧文字，适合中文页面微调字隙，word-spacing在连续中文里效果微弱，更适合英文混排场景，line-height推荐使用无单位数值，会以当前字号作为基准自动换算，适配大多数响应式文字排版，如果你只修改单行标题的字距，优先选用letter-spacing，段落正文行松紧调整以line-height为主。

css字体间距如何调整，横向字距写法

letter-spacing的取值单位可以使用px、em、rem，em和rem具备相对缩放特性，当字号发生变化，间距会跟着同步变动，px属于固定数值，不会跟随字号缩放。给元素设置样式时，直接把属性写进选择器内部，例如p{letter-spacing:1px;}，这个写法会让段落内部每一个汉字之间多出一像素的空隙，想要收紧文字，就填入负数，像-0.5px这类取值，常用于标题紧凑排版。

word-spacing只对空白分隔的单词生效，中文段落没有天然单词分隔，设置这个属性很难看到明显变化，英文段落或者穿插大量英文短语的页面，它才可以发挥作用，它同样接受正负数值，正值拉大单词间隙，负值缩小单词之间的距离。

不要混淆这两个属性。

css字体间距如何调整，纵向行距写法

line-height是控制行距的核心属性，无单位写法比如line-height:1.6，代表行高等于字号乘以一点六，浏览器会自动完成计算，更换字体大小之后比例维持不变，这种方式在多字号共存的页面稳定性更强。带单位写法如line-height:24px，会锁定行高，字号变大之后文字容易出现重叠，适合尺寸固定的短文本模块。

vertical-align不能用来调整整段文字的行距，它只改变行内元素在一行内部的对齐位置，不少新手会尝试依靠它拉开段落纵向空隙，最后发现只有图标或者小行内元素位置变动，整段文字疏密没有改变，这是一处容易出现的操作偏差。

不同间距属性对比

该方法的适用边界是，它只作用于行内与行内块元素，块级容器内的间距重置需要搭配外边距、内边距，如果你使用特殊字体或者可变字体，字体自带的字宽设置会叠加css属性，最终呈现的空隙会和单纯计算出来的数值存在小幅偏差。

全局统一调整页面所有文字间距，你可以把样式挂载到html选择器，后续子元素没有重写属性时，会继承这份设置，单独组件想要脱离全局规则，只需要在对应选择器重新定义属性即可，继承机制让批量排版的工作量得到缩减。

移动端展示时，过大的负值letter-spacing会造成文字笔画互相遮挡，小字号文本要把收紧幅度控制在较小范围，保证文字识别顺畅，阅读不会受到干扰。