letter-spacing

综述

CSS 的 letter-spacing 属性明确了文字的间距行为。 

语法

letter-spacing: normal;

letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

letter-spacing: inherit;

值

normal

此间距是按照当前字体的正常间距确定的。 用户代理根据此属性来确定文字的默认对齐方式。等同于间距 0。

<length>

指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

 <length> 属性值的支持单位。

形式语法

normal | <length>

示例

HTML 内容

<p class="first-example"> letter spacing </p>
<p class="second-example"> letter spacing </p>
<p class="third-example"> letter spacing </p>
<p class="fourth-example"> letter spacing </p>

CSS 内容

.first-example { letter-spacing: 0.4em; }
.second-example { letter-spacing: 1em; }
.third-example { letter-spacing: -0.05em; }
.fourth-example { letter-spacing: 6px; }

结果

可解决的问题

一个很大的正或负的letter-spacing值会将应用这个样式的单词边为不可读的。给文本letter-spacing属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本letter-spacing属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

一个最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

说明

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!