css：如何水平对齐不同大小的字体答案

【问题标题】：css: How to horizontal align fonts with different sizescss：如何水平对齐不同大小的字体
【发布时间】：2013-01-21 21:46:13
【问题描述】：

关于 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/

如果您查看示例，您会注意到较大的字体具有更多“？填充？”比较小的字体。使它们错位几个像素。

我正在寻找一种方法或公式来完美地左对齐它们，而不是在左边距上使用试错法！

感谢所有想法。

【问题讨论】：

你说的是大文本下面的东西，对吧？那当然会发生，每个字母的宽度都不同。 D是最大的108px。如果您在 CSS 中将 H1 设置为 108px，h1 { width: 108px } 它们将完全相等，相距 108 px。这会有帮助吗？
您需要自动化来执行此操作吗？如果没有，您可以通过简单的尝试/失败来克服这个问题，使用 text-indent 和 text-align:justify 到单个大字母 width。

标签： html css font-size alignment

【解决方案1】：

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

<h1>B</h1>

由

<h1>J</h1>

现在空间小了很多！

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

【讨论】：

谢谢，这就是问题所在！！如果可以在所有字符上找到具有相同“字距”的字体，那么很容易找出 bigText 和 smallText 之间的关系，并推断出任何字体大小组合的调整，但谷歌在这方面没有帮助.. .
有这样的字体，但我从来没有在网络上使用过。寻找“等宽字体”或“固定宽度”字体。最广为人知的是“快递员”。但不变的是字符的宽度，而不是左边的空白空间......

【解决方案2】：

一个潜在的技巧：添加:first-letter { margin-left: -0.08em; }。必须针对您的字体调整 em，但如果您愿意，您可以全局应用它。它确实会导致向左小幅移动，但您可以随意更改 H1 的字体大小，并且它会保持对齐。

看到这个update to your jsFiddle。

虽然它不能解决“J”问题，所以它可能对你来说是一个没有实际意义的问题。

【讨论】：

【解决方案3】：

我知道你想要这个？：

h6 {
    float: left;
position: relative;
left: 11px;
}

示例：http://jsfiddle.net/jgYBD/4/

【讨论】：

没错，这就是我想要的结果！但是你如何到达“left: 11px;” ? Chrome 和 Firefox 以不同的方式呈现我的字体，我想知道是否有一个技巧可以在没有反复试验的情况下获得正确的边距值。
为了获得最佳效果，请使用 % 而不是使用 px 作为字体大小。你也可以。如果你只想定位 mozila @-moz-document url-prefix() { * { font-weight: 100; } h1，h2，h3，h4，h5，h6 { 字体粗细：400； /* 400 是“正常”字体粗细——在 Firefox 中相当粗体！ */ } }
如何解决问题？ 11px 只是一个猜测。如果您更改标题的字体大小，它会再次错位。

【解决方案4】：

试试这个

h6 { padding: 0 10px; }

【讨论】：

不适用于更大的字母（例如，300px），但它适用于提供的示例 OP。
是的，他必须去掉 html 中的空格，只使用填充。