css:如何水平对齐不同大小的字体

Question

关于SO的第一个问题!

我试图"像素完美"水平对齐两行文本,每行具有不同的字体大小.

<style type="text/css">
    *   { font-family: sans-serif;}
    div { float: left;}
    h1  { font-size: 150px;  margin-bottom:-30px; }
</style>

        <div>
            <h1> B </h1>
            <h6> B-L.align </h6>
        </div>
        <div>
            <h1> L </h1>
            <h6> L.align </h6>
        </div>

这里示例:http://jsfiddle.net/jgYBD/1/

如果您查看示例,您会注意到较大的字体有更多"？padding？" 比较小的字体.使它们与几个像素不对齐.

我正在寻找一种方法或公式来完美地左对齐它们,而不使用左边缘的试验和错误!

所有的想法都表示赞赏,谢谢.

Answer 1

您看到的不是填充，而是字体的某种“字距调整”。不完全是这样，但有点像。最大的问题是，每种字体，甚至每个字母，它都是不同的。尝试更换

<h1>B</h1>

经过

<h1>J</h1>

现在空间小多了！

这个空间取决于字体、大小和字母。所以，我认为你无法控制它