由于字体系列导致的垂直对齐问题答案

【问题标题】：Vertical Alignment issue due to font-family由于字体系列导致的垂直对齐问题
【发布时间】：2017-09-14 20:03:40
【问题描述】：

我遇到了一个问题，即标签中的文本垂直下降了一点。这个问题是 Open Sans google 字体特有的。 Arial 和其他字体似乎工作正常。不知道是什么问题。

请在此处找到 jsFiddle： https://jsfiddle.net/or7nkyts/3/

第一个按钮有 Open Sans，第二个按钮有 Arial 字体系列。

感谢任何帮助。

<a  target="_blank"  href="javascript:void(0)" class="btn testClass">
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
    <span style="vertical-align: middle;">Blue Button</span>
</a>
<a  target="_blank" style="font-family: Arial;"  href="javascript:void(0)" class="btn testClass">
    <i style="font-size: 24px; color: #fff; vertical-align: middle;" class="fa fa-address-book-o"></i>
    <span style="vertical-align: middle;">Blue Button</span>
</a>

【问题讨论】：

您使用的是哪种浏览器？
尝试在样式中使用中心而不是中间。
vertical-align: middle 是正确的
我正在使用 Chrome。但我认为这是所有浏览器都存在的问题。

标签： vertical-alignment

【解决方案1】：

我认为这是因为字体是如何制作的，除了使用 css 操作之外，您几乎无能为力。

如果您在按钮文本的span 上添加边框，您会看到字体本身在顶部的边距比在底部的边距更大，并且实际上与图标居中对齐。

a.testClass span {
    border: 1px solid red;
}

这里有一个可能更适合您的解决方案：

https://jsfiddle.net/32cLkm5x/2/

【讨论】：

感谢您的回答。但就我而言，问题是我在页面构建器应用程序中有这种情况，用户可以在其中设置按钮的字体系列、字体大小、填充、边距和边框。他们还可以管理图标的字体大小。因此，通常很难添加此类修复。