CSS letter-spacing 属性

CSS letter-spacing 语法

在 CSS 中，letter-spacing 属性用于定义文本中 “字间距” 。

语法：

letter-spacing: 数值;

说明：

letter-spacing 的取值是一个数值，比如像素值（px）、em、rem 等。

letter-spacing 的取值可以是一个正值，也可以是一个负值。当使用负值时，如果值过大，可能会导致字符重叠。

letter-spacing 从字面上就可以看出是 “字母间距”。注意，每一个中文汉字都被当做一个 “字”，而每一个英文字母也当做一个 “字”。

注意: 与 word-spacing 不一样，letter-spacing 会同时作用于英文和中文。

CSS letter-spacing 摘要

属于	CSS 文本属性
使用频率	中
是否继承	是
默认值	0
兼容性	查看
官方文档	查看
MDN	查看

CSS letter-spacing 示例

接下来，我们通过几个简单的例子来讲解一下 CSS letter-spacing 属性是如何使用的。

示例 1：letter-spacing 增加字间距

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { letter-spacing: 2px; }
        p:nth-child(2) { letter-spacing: 5px; }
        p:nth-child(3) { letter-spacing: 8px; }
    </style>
</head>
<body>
    <p>绿叶网（lvyenet）</p>
    <p>绿叶网（lvyenet）</p>
    <p>绿叶网（lvyenet）</p>
</body>
</html>

页面效果如下图所示。

letter-spacing增加字间距

分析：

当 letter-spacing 取值为正值时，会增加字之间的空隙。然后从页面效果可以看出，letter-spacing 不仅会影响英文字符之间的间距，也会影响中文字符之间的间距。

示例 2：letter-spacing 减少字间距

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { letter-spacing: -1px; }
        p:nth-child(2) { letter-spacing: -2px; }
        p:nth-child(3) { letter-spacing: -3px; }
    </style>
</head>
<body>
    <p>绿叶网（lvyenet）</p>
    <p>绿叶网（lvyenet）</p>
    <p>绿叶网（lvyenet）</p>
</body>
</html>

页面效果如下图所示。

letter-spacing减少字间距

分析：

当 letter-spacing 取值为负值时，会减少字与字之间的空隙。不过不要过度使用 letter-spacing，因为它可能会影响可读性，影响用户体验。

letter-spacing 与 word-spacing

letter-spacing 与 word-spacing 看着很相似，它们之间的区别如下。

letter-spacing：定义的是 “字间距”，可以作用于英文文本和中文文本。
word-spacing：定义的是 “词间距”，只会作用于英文文本。