文本未垂直居中

Question

我正在使用 line-height 属性将一些文本与菜单中的图标对齐。我创建了一个简化版本（没有图标）来说明我的问题。这似乎是字体的一般垂直对齐方式的问题。

你可以在 jsfiddle 上看到这个问题：http: //jsfiddle.net/KFxG3/1/

代码非常简单：

  <div>qb - Some text - qb</div>

添加样式：

  div {
     background-color: green;
     height: 22px;
     line-height: 22px;
     font-size: 20px;
     font-family: 'Segoe UI', 'Verdana', 'Arial';
 }

这是它的样子：

它应该是这样的：

为什么在较新的浏览器中会发生这种情况？我已经在 Firefox 27.0 的 Windows 8.1 64 位上测试过它。

编辑：我想知道，为什么浏览器无法正确呈现。当应用与容器高度相同的行高时，像“a”这样的小写字母应该在“绿色”的顶部和底部获得相同的空间。但是渲染是错误的。

编辑#2：这是字体的问题。 Segoe UI 似乎有一个奇怪的基线。当使用 Arial、Verdana 或任何更适合的垂直对齐方式时（但它也不完美）。 -> http://jsfiddle.net/KFxG3/22/

原文由 SuperNova 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在使用付费字体时遇到了同样的问题。经过一番研究，我找到了这个工具 → https://transfonter.org/ 。只需上传您的字体，并且不要忘记将“修复垂直指标”选项更改为“打开”。在此之后下载新字体并将其替换为以前的字体。为我工作:)

原文由 Theo Kekatos 发布，翻译遵循 CC BY-SA 4.0 许可协议