letter-spacing
letter-spacing CSS 属性设置文本字符之间的水平间距行为。此值在渲染文本时会添加到字符的自然间距中。letter-spacing 的正值会使字符间距变宽，而负值会使字符间距变窄。
试一试
letter-spacing: normal;
letter-spacing: 0.2rem;
letter-spacing: 1px;
letter-spacing: -1px;
<section id="default-example">
<p id="example-element">
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
语法
css
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;
值
无障碍
过大或过小的 letter-spacing 值将使应用样式后的单词变得难以阅读。对于应用了非常大正值的文本，字母会相距太远，以至于单词看起来像一系列独立的、不连贯的字母。对于应用了非常大负值的文本，字母会相互重叠，以至于单词可能无法识别。
易读的字符间距必须根据具体情况确定，因为不同的字体家族具有不同的字符宽度。没有一个值可以确保所有字体家族自动保持其易读性。
国际化注意事项
某些书面语言不应应用任何字符间距。例如，使用阿拉伯语书写的语言希望连贯的字母保持视觉上的连贯，如下例所示。应用字符间距会导致文本看起来支离破碎。
شسيبتنمك
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 由绝对长度或关键字 normal 组成的最优值 |
| 动画类型 | 一个长度 |
正式语法
letter-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
设置字符间距
HTML
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
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;
}
结果
规范
| 规范 |
|---|
| CSS Text Module Level 3 # letter-spacing-property |
| Scalable Vector Graphics (SVG) 2 # LetterSpacingProperty |
浏览器兼容性
加载中…