多种字体的垂直度量

Question

我遇到了这个问题，不知道如何解决。 我正在建立一个网站，我正在使用不同的字体

我需要每种字体在光学上与另一种字体完全一致，并且在底部完全对齐。

假设我在写 HELLO (helvetica) HELLO (georgia) 我会更正它们的大小，因为 40px helvetica 的大小可能与 40px georgia 的大小不同。 但问题在于基线

当我看到所有字体（相同的 px 和 line-height）并排放置时，它们并没有水平对齐。

Link to image here!

Answer 1

@cameron.townsend 评论是正确的。您将要在所有文本上使用 vertical-align:baseline; 以显示您想要的效果。

这是一个展示不同对齐方式的小提琴：https://jsfiddle.net/g7oqupej/1/

话虽如此，Chrome 的默认 (vertical-align:initial;) 行为似乎是 vertical-align:baseline; 不确定其他浏览器，因为我没有测试过，但是使用我在小提琴中使用的字体，事情似乎排成一行随心所欲。

我建议创建一个小提琴来显示您必须查看是否正在执行其他操作的问题。