CSS 字体间距 - 绿叶网

在 CSS 中，我们可以使用 letter-spacing 属性来定义字体间距（即字间距）。

语法：

letter-spacing: 数值;

说明：

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

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

提示: letter-spacing 也可以取负值（如 -2px），这会让字符排列得更紧密。比如 letter-spacing: -1px;（收紧间距）是非常常用的技巧，特别是在大号标题中，收紧一点会显得更精致、更有冲击力。

示例：CSS 定义字体间距

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 { letter-spacing: 2px; }
        .p2 { letter-spacing: 5px; }
        .p3 { letter-spacing: 8px; }
    </style>
</head>
<body>
    <p class="p1">绿叶网（lvyenet）</p>
    <p class="p2">绿叶网（lvyenet）</p>
    <p class="p3">绿叶网（lvyenet）</p>
</body>
</html>

页面效果如下图所示。

CSS 字体间距示例

letter-spacing 与 word-spacing

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

letter-spacing 定义的是 “字间距”，可以作用于英文文本和中文文本。
word-spacing 定义的是 “词间距”（通过空格识别），同样可以作用于英文文本和中文文本。