CSS letter-spacing 属性
CSS letter-spacing 属性
CSS letter-spacing 属性定义文本中字符间的额外距离。
语法
letter-spacing: normal|length|inherit;
值
- normal：默认值，字符间距为正常。
- length：表示字符间距离，可以是正数、负数和0。正数表示字符间增加距离，负数表示字符间减少距离，0表示字符间距离不变。
- inherit：继承父元素的 letter-spacing 属性值。
使用
设置字符间距
p {
letter-spacing: 3px;
}
设置字符间距为负数
p {
letter-spacing: -2px;
}
注意事项
- letter-spacing 属性应该增加适当的空隙，使得字符之间更容易辨认并阅读。
- letter-spacing 不应过大，否则会影响文本的可读性。
- 浏览器默认情况下，letter-spacing 属性对中文不起作用。
兼容性
letter-spacing 属性在 IE 4.0 和 Netscape 4.0 中首次出现，现在已成为 CSS 的标准。
实例
以下示例展示了不同 letter-spacing 值的效果：
h1, h2, p {
letter-spacing: normal;
}
h1.spaced, h2.spaced, p.spaced {
letter-spacing: 2px;
}
h1.big, h2.big, p.big {
letter-spacing: 4px;
}
h1.negative, h2.negative, p.negative {
letter-spacing: -1px;
}
<h1>这是默认字符间距的标题</h1>
<h2>这是默认字符间距的副标题</h2>
<p>这是默认字符间距的段落</p>
<h1 class="spaced">这是增加字符间距的标题</h1>
<h2 class="spaced">这是增加字符间距的副标题</h2>
<p class="spaced">这是增加字符间距的段落</p>
<h1 class="big">这是更大的字符间距的标题</h1>
<h2 class="big">这是更大的字符间距的副标题</h2>
<p class="big">这是更大的字符间距的段落</p>
<h1 class="negative">这是减少字符间距的标题</h1>
<h2 class="negative">这是减少字符间距的副标题</h2>
<p class="negative">这是减少字符间距的段落</p>
预览：
结论
letter-spacing 属性可以用来增加或减少字符之间的距离，达到不同的排版效果。但是需要注意设置合适的距离，避免影响文本的可读性。