CSS letter-spacing 属性允许指定文本中字母/字符之间的空格。
letter-spacing 支持的值包括父相对值（百分比）、字体相对值（em、rem）、绝对值（px）和 normal 属性，该属性重置为字体的默认值。
letter-spacing 属性支持负值。
字母间距是可转换的，这就是为什么定义了转换后间距会平滑变化的原因。
过渡速度由动画计时功能指定。
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | CSS1 |
| DOM 语法 | object.Style.LettersPacing =“5px”; |
语法
letter-spacing: normal | length | initial | inherit;
字母间距属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing 属性示例</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>
在给定的示例中，第一个是普通段落，对于第二个段落，字母间距设置为 4px，对于第三个段落，设置为负值 (-4px)。
在下面的示例中，字母间距与过渡属性一起使用。
我们需要将鼠标悬停在文本上才能看到过渡。
带有 transition 属性的 letter-spacing 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing 属性示例</h2>
<div class="example1">
<p>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<div class="example2">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
</div>
</body>
</html>
另外说明
- 在几乎所有的浏览器中，如果我们定义了一个小于 1px（子像素值）的计算值，则不会应用 letter-spacing 属性。
- 字母间距小写字母不是一个好主意。
- 我们可以使用 CSS 转换为该属性设置动画。
CSS letter-spacing 属性值说明
| 值 | 描述 |
|---|---|
| normal | 意味着字符之间不会有另外的空格。这是此属性的默认值。 |
| length | 在字符之间定义另外的空间。允许负值。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:37 来源：oir作者：oir