Google Chrome 浏览器中的文本垂直对齐错误

Question

我在创建“按钮”元素（带边框的内联块容器中的文本）时遇到问题，因为在某些字体大小文本中垂直对齐错误（不是完美的中间）。

我想使用 Raleway（Google Web 字体）和 Bootstrap。 文本容器的高度由行高设置。

我正在 Windows 7...

上进行测试

在 Firefox（版本 36）上一切都很完美

但问题出在 Google Chrome（版本 41）上

实时预览：http://biznes-dynamit.pl/test/marcin-dobroszek/font/

部分CSS代码：

/*Bootstrap default style*/
* {
    box-sizing: border-box;
}
.btn {
    display: inline-block;
    vertical-align: middle;
}

/*custom style*/
body {
    font-family: "Raleway";
}
.btn {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 16px;
    font-size: 11px; /*real height: 8*/
}
.btn-sm {
    font-size: 10px; /*real height: 7*/
    line-height: 15px;
 }
.btn-lg {
    font-size: 12px; /*real height: 8-9*/
    line-height: 16px; /*light, normal*/
 }

---

正如您在 Chrome 预览中看到的某些字体大小和字体粗细文本向上移动相对容器。

3倍缩放示例，字体大小：11px（行高：16px），字体粗细：半粗体。

顶部和底部空间（文本和顶部/底部边框之间）应该相同：4px，但如您所见，顶部空间为 3px，底部空间为 5px。

可以解决这个浏览器问题吗？

Answer 1

这个非常烦人的问题是由于 chrome 没有考虑到

text-transform: uppercase

造成的。使用以下命令在 Chrome 中使用全大写文本获得正确居中：

text-transform: lowercase;
font-variant: small-caps;

小提琴：http://jsfiddle.net/fyvyB/76/

非常适合按钮，对于其他用例，您可能会遇到文本为小型大写字母而不是真正的大写字母的问题。

Answer 2

自定义字体也有类似的问题。经过一番尝试并尝试了文本元素上的所有不同显示属性后，我注意到垂直对齐问题仅影响父级为

display: block;

的文本元素，尽管所述文本元素被设置为

display: inline;

。我通过将父母更改为

display: table;

并将子文本 elem 更改为

display: inline;

解决了这个问题，例如下面...我无法解释为什么这有效，但在这里发帖以防对其他人有帮助...

<style>
  div {
    display: table;
  }
  span {
    display: inline;
    padding: 5px 10px; /* to make v-alignment clearer */
  }
</style>
<div>
  <span>Some text here</span>
</div>

Answer 3

我遇到了同样的问题，但使用的是 Nimbus Sans 而不是 Raleway。我可以通过使用

@font-face

并在加载字体时设置

ascent-override: 100%

来解决这个问题。

这是一个在 Firefox v126 上垂直居中的示例，但在 Chromium v125 上不居中：

#wrapper {
  height: 128px;
  color: white;
  display: flex;
  margin: .5em;
}

div div {
  border-radius: 1rem;
  padding: .5em;
  display: flex;
  align-items: center;
  background-color: #f22;
}

span {
  font-size: 4rem;
  border: 1px solid;
}

/* monospace generic font family so it's obvious if the main font isn't used */
#nimbus {
  font-family: "Nimbus Sans", monospace;
}

<div id="wrapper">
  <div><span id="nimbus">Text</span></div>
</div>

通过指定覆盖

ascent-override

属性，我们现在可以在 Firefox 和 Chromium 之间获得一致的结果：

/* Fixes inconsistent ascent issue in Chromium browsers. */
@font-face {
  font-family: "Nimbus Sans";
  src: local("Nimbus Sans"), format("woff");
  ascent-override: 100%;
}

#wrapper {
  height: 128px;
  color: white;
  display: flex;
  margin: .5em;
}

div div {
  border-radius: 1rem;
  padding: .5em;
  display: flex;
  align-items: center;
  background-color: #f22;
}

span {
  font-size: 4rem;
  border: 1px solid;
}

/* monospace generic font family so it's obvious if the main font isn't used */
#nimbus {
  font-family: "Nimbus Sans", monospace;
}

<div id="wrapper">
  <div><span id="nimbus">Text</span></div>
</div>