Question

Answer 1

似乎所有的浏览器都集中在一个字母间距的实现上，这与css3所说的应该发生的情况明显不一致。

特别参见http://dev.w3.org/csswg/css3-text/#letter-spacing0

的例XV

浏览器根本就不这样做。 IE甚至最近改变了它的行为（IE9，我认为）更像其他浏览器，而不像目前编写的CSS3规范。

有问题的CSS3规范仍然处于工作草案状态，因此可能会在某些时候将其更改为与浏览器的内容相匹配。

您可以通过添加填充左侧值来匹配字母间距来重新平衡线条，但这可能并不总是可行。

Answer 2

由于问题没有真正描述，我认为文本没有完全居中..

您可以使用text-indent一半大小的字母间距来纠正这个问题。

.centered {
  letter-spacing:12px;
  text-indent:6px;
}

仅在Chrome OSX上测试过..

Answer 3

它似乎有效，但您对此像素完美度的要求不符合letter-spacing的默认工作。如果您突出显示该文本，您将看到它确实居中。

您可以使用以下解决方法：demo fiddle

<div style="text-align: center;">           
  <div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
  <div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>            
  <div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
  <div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>           
</div>

Answer 4

我看到链接下划线的类似问题：最后一个字母的宽度包括字母间距值。因此，应用letter-spacing:0;来解决问题的最后一封信。这很难看，但它有效。

...
<div style="font-size: 350%; letter-spacing: 0.4em;">
    ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...

Answer 5

将50％的字体大小添加为文本缩进，如此

    <div style="text-align: center;">
        <div style="font-size: 130%; letter-spacing: 0.6em;text-indent:0.3em">THIS</div>
        <div style="font-size: 350%; letter-spacing: 0.4em;text-indent:0.2em">ILLUSTRATES</div>
        <div style="font-size: 130%; letter-spacing: 0.4em;text-indent:0.2em">THE</div>
        <div style="font-size: 200%; letter-spacing: 0.1em;text-indent:0.05em">PROBLEM</div>
    </div>

Answer 6

虽然这不是确切的问题，但我有一个问题，即文本的起始左侧点太远了：

我遇到了一个问题，即在应用字母间距之后，我的文字不再是水平居中的，而是因为我限制了文本容器的宽度，所以它溢出了它的容器值得研究..这看起来似乎很愚蠢，但实际上这很容易被误解。

字母间距和文字对齐：中心之间的冲突？

6 个答案: