综述

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

初始值normal
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值an optimum value consisting of either an absolute length or the keyword normal
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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)必须根据具体情况来确定,因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

说明

Specification Status Comment
CSS Text Module Level 3
letter-spacing
Working Draft 没有变化
CSS Transitions
letter-spacing
Working Draft 定义可动的间距
CSS Level 2 (Revision 1)
letter-spacing
Recommendation 没有变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
letter-spacing
Recommendation 初始化 SVG
CSS Level 1
letter-spacing
Recommendation Initial specification

浏览器兼容性

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!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
HTML 支持 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
SVG 支持 (Yes) 未实现 (bug 371787) ? (Yes) (Yes)
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
HTML 支持 ? ? ? ? ?
SVG 支持 ? ? ? ? ?

文档标签和贡献者

此页面的贡献者: LJJ1996, Sebastianz, SphinxKnight, fscholz, Fadeoc, FredWe
最后编辑者: LJJ1996,