CSS
的 letter-spacing
属性用于设置文本字符的间距表现。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
值
形式语法
示例
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; }
结果
可解决的问题
一个很大的正或负的 letter-spacing
值会将应用这个样式的单词变为不可读的。给文本 letter-spacing
属性应用了一个很大的正值,字母之间的距离会很远,以至于文本中的单词将显示为一系列单独的,无有任何关联的字母。给文本 letter-spacing
属性应用了一个很大的负值,字母将会互相重叠到一个点,在这个点上单词可能无法识别了。
最佳的易辨认的字母间距(letter-spacing)必须根据具体情况来确定,因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。
可访问性考量
A large positive or negative letter-spacing
value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.
Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.
规范
规范 | 状态 | 备注 |
---|---|---|
CSS Text Module Level 3 letter-spacing |
Candidate Recommendation | 没有变化 |
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 |
初始值 | normal |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | yes |
计算值 | an optimum value consisting of either an absolute length or the keyword normal |
Animation type | a length |
浏览器兼容性
BCD tables only load in the browser