DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费信用额度！
letter-spacing 属性控制给定元素或文本块中每个字母之间的空间量。 letter-spacing 支持的值包括字体相关的值（em、rem）、绝对值（px）和 normal 属性，该属性会重置为字体的默认值。
建议使用字体相关的值，以便在通过设计或用户行为更改字体大小后，letter-spacing 能够相应地增大或减小。
p {
letter-spacing: 0.0625em;
}在使用 letter-spacing 时，最重要的是要注意，指定的值不会更改默认值 - 它会添加到浏览器应用的默认间距（基于字体指标）。 letter-spacing 也支持负值，这将使文本的显示更加紧密，而不是更加宽松。
语法
letter-spacing: normal | <length>- 初始值：
normal - 适用于：内联框和文本
- 继承： 是
- 百分比： 不适用
- 计算值： 绝对长度
- 动画类型： 按计算值类型
值
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 1px;
letter-spacing: .25em;
letter-spacing: .3rem;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;值得注意的是…
- 亚像素值：在大多数浏览器中，指定计算结果小于
1px的值将导致不应用任何letter-spacing。 letter-spacing属性可以使用 CSS 过渡 进行动画制作。- 解决内联块元素之间间距问题的一种方法是在内联块元素的父容器上设置
letter-spacing: -4px;。 然后需要在子元素上重置letter-spacing: normal;。 - 给小写字母设置字母间距很少有必要，甚至完全没有必要。
浏览器支持
此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。
台式机
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 30 | 2 | 9 | 12 | 6.1 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 4.0-4.1 |
看起来 Chrome 中已经有了亚像素字母间距。不知道它是什么版本添加的，但它在 30.0.1599.101 版本中有效。不幸的是，它只针对 Blink 引擎（不是 WebKit），所以它在 Safari 中仍然不起作用（至少在 6.0.5 中；我得回家在 7/Mavericks 上测试一下）。
由于 Chrome、IE 和 Firefox 都支持它，所以它在目前已经相当标准化了，这很棒。在小字体大小下，1px 和 0.5px 之间的差异很大。
一个小评论。
Firefox 仍然不支持 SVG 的 letter-spacing 和 word-spacing，存在一个已知错误。
https://bugzilla.mozilla.org/show_bug.cgi?id=371787
“很少有必要，而且几乎不可能对小写字母使用字母间距。”
我只是好奇你为什么这么说，你能给出一些好的/不好的例子吗？小写标题呢？
谢谢
也许值得注意的是：最近我遇到了“letter-spacing”影响元素内填充的情况。我不知道它应该这样做。这是我使用的 CSS；我希望我没有把这个问题与其他正在发生的事情混淆。
我也遇到了这个问题。字母间距似乎在右侧单词的末尾添加了一些间距。在盒子模型方面，它是元素本身（即不是边距或填充），这被证明是一个问题。
box-sizing: border-box; 会不会解决这个问题？
我偶然发现了类似的问题。
我做了一些测试，发现最后一个字母也会生成字母间距，这会造成布局的视觉不平衡。
我找到了这个简单的解决方法来纠正它
h2 {
font-family: ‘Oswald’, sans-serif;
font-size: 1.25em;
text-transform: uppercase;
color: #dca013;
font-weight: 300;
letter-spacing: 1em;
padding: 0 0 0 1em; /* 补偿额外的间距 */
}
(虽然我的直觉认为应该是 .5em)
从谷歌搜索字母间距来到这里。Chris 的技巧似乎很好用！
Chris 的解决方案对我来说不起作用，因为我的文本周围有一个边框（按钮）——所以我使用这段 css 添加了一个“文本缩进”：text-indent: 15px; 当然，用你的字母间距值替换 15px。效果很好。
记得在不同的浏览器中测试（尤其是负数）字母间距。Firefox 和 Chrome 对间距文本的渲染方式差异很大 :(
我不确定父级相对值是否适用于字母间距。我试图弄清楚如何使一行文本的字母间距响应其容器的宽度，而百分比不起作用。有什么建议吗？（我可能必须使用一些 JavaScript 来解决它。）
也许可以结合使用 text-align: justify 和字母间距？
好吧，如果字母间距是静态的，那么它的问题在于它失去了对容器宽度真正响应的能力。我最终将每个字母都包装在一个 a 中，并在每个字符上定义了 4% 的宽度。（有 25 个字符 = 100% 宽度）。似乎效果很好。不过，我确实失去了该词串的 SEO 优势。我想我可以在页面加载时使用 JavaScript 将每个字符包装在一个 a 中，以恢复该优势。
哎呀，似乎我上次评论中被“小于”和“大于”符号包围的“span”字被删除了。这就是不预览就发布的代价。无论如何，我把每个字符都包装在一个“span”中。
由于从 chrome 37 开始 DirectWrite 对每个人都启用，因此 chrome 现在也支持字母间距和字体的亚像素值。但是，目前最终用户可以在 chrome://flags 中禁用 direct write，如果他们愿意。
“使用字母间距时需要注意的最重要一点是，指定的数值不会改变默认值，它会添加到浏览器应用的默认间距中。”
吹毛求疵，但我认为更准确的说法应该是“不会替换默认值”，而不是“不会更改默认值”。
有谁知道 InDesign 中 100 A/V 或 200 A/V 等效于 CSS 或 WordPress 中的什么？我试图与我的程序员沟通，她说她不理解 100 或 200 A/V，我需要用 WordPress 语言告诉她这些数字。
有谁知道吗？
谢谢！
感谢您的帮助。