为什么 Spartan 字体不垂直居中？

Question

我想弄清楚为什么我的字体没有垂直对齐。我正在使用 Google 提供的 Spartan MB 字体，它看起来不对，see here。

我的 HTML 标记是这样的：

<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
    <style>
      button, input {
  font-family: 'Spartan', sans-serif;

      }
    </style>
  </head>
  <body>
    <button>Click me</button>
    <input type="text" value="Hello world" />
  </body>
</html>

为什么使用常规 Arial 字体没有任何问题？

我尝试过的方法

设置不同的 line-heigh 属性。没有帮助。
设置vertical-align: text-bottom没有帮助。
使用 ftxdumperfuser 实用程序修改字体本身，如 here 所述，通过更改上升和下降属性。这有点帮助，但只适用于 Chromium 浏览器。

有人可以启发我了解这种行为吗？有跨浏览器的方法来解决这个问题吗？

Answer 1

问题出在字体本身及其呈现方式上。您只能使用来自 top/bottom.

的不同填充

  button, input {
  font-family: 'Spartan', sans-serif;
  }
  
 .trick {
  font-family: 'Spartan', sans-serif;
  padding-top: 3px;
  }

<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
  </head>
  <body>
    <button>Click me</button>
    <button class="trick">Click me</button>
  </body>
</html>

输入也固定

button, input {
    font-family: 'Spartan', sans-serif;
    vertical-align: middle;
}
  
  input {
    padding-top: 4px;
}

<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
  </head>
  <body>
    <button><span style="vertical-align: sub;">Click me</span></button>
    <input type="text" value="Hello world" />
    </body>
</html>

为什么 Spartan 字体不垂直居中？

Why is Spartan font not centered vertically?

html

css

fonts