为什么Verdana字体在文本之前会产生不同的空间大小，具体取决于字体？

Question

在以下HTML / CSS示例中

http://jsfiddle.net/Hmwvv/

我们可以注意到一个大小与字体大小成比例的前导空格。如何删除此效果，以便在不同的div元素中对齐不同大小的文本？

Answer 1

每个字形周围都有少量空白区域，这是故意的，因此字母不会重叠。你可以通过选择一个字母来看到这一点。

要解决您的问题，请引入一个小的否定text-indent。

#big {
    text-indent: -5px;
}

Demo

Answer 2

前导空格是角色渲染的一部分，您可以看到，例如通过设置`div：first-letter {background：green}。它会违反正常的印刷规则进行调整。

但是如果你真的想在一个标题和后面的一个段落的第一行中以不同的大小对齐字母“M”的最左边的笔划，那么在段落上设置margin-left: 0.3em似乎是最好的选择。这适用于Verdana并使用这些特定字符。 （例如，如果标题的第一个字母是“J”，则情况非常不同。）