letter-spacing

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。

示例

/* Keyword value */
letter-spacing: normal;

/*  values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

浏览器支持

浏览器都支持 letter-spacing

语法:

letter-spacing : normal | <length>

取值

• normal ：此间距是按照当前字体的正常间距确定的。和 0 不同的是，用户代理根据此属性来确定文字的默认对齐方式。
• <length> ：指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

说明:

检索或设置对象中的字符之间的最小，最大和最佳间隙。

• 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
• <length> 不能被应用于一行的开始和结束；
• 对应的脚本特性为 letterSpacing 。

可解决的问题

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

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

可访问性考量

较大的正值或负值letter-spacing将使应用样式的单词不可读。对于具有非常大的正值样式的文本，字母之间的距离会太远，以至于单词将看起来像一系列单独的，未连接的字母。对于具有非常大的负值样式的文本，字母将相互重叠，直到单词可能无法识别的地步。

由于不同的字体系列具有不同的字符宽度，因此必须根据具体情况确定清晰的字母间距。没有任何一种值可以确保所有字体系列自动保持其可读性。

例子

//HTML
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

//CSS
.normal   { letter-spacing: normal; }
.em-wide  { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide  { letter-spacing: 6px; }

h1{letter-spacing:2px}
h2{letter-spacing:-3px}