为什么 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 字体没有任何问题？

我尝试过的方法

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

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

Answer 1

问题在于字体本身，如何呈现。您只能使用顶部/底部的不同填充。

  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>