html - 为什么 Verdana 字体会根据字体在文本之前产生不同的空间大小？

Question

在以下 HTML/CSS 示例中

http://jsfiddle.net/Hmwvv/

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

Answer 1

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

为了解决你的问题，引入一个小的负数text-indent。

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

演示

Answer 2

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

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