IOS字体渲染问题

Question

我尝试使用 font-squirrel 提供的字体 BabeNeue

我使用了以下代码

<input type="submit" name="checkout" value="Checkout" class="checkout">

遵循 CSS

input#purchase, input.checkout, .btn-border {
color: #D39229;
background: rgba(0, 0, 0, 0);
border: 3px #D39229 solid;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
border-radius: 0px;
padding: 4px 20px;
line-height: 18px;
box-sizing: border-box;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
cursor: pointer;
align-items: start;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'BebasNeue', 'Trebuchet MS', sans-serif;
font-size: 18px;
}

并从我的location导入字体

现在字体在 Windows 中可以正确渲染，但在 iPhone 和 Mac 上存在问题。文本正在向上移动。

现在，如果我将按钮字体更改为 Arial，它可以在所有浏览器和设备上正常工作。

演示here

Answer 1

我在 firefox 和 chrome 上使用这种字体时遇到了问题（正确设置大小和行高）
我对代码做了一些修改，这对我来说效果很好
（不知道 align-items 做了什么，虽然之前从未见过或使用过）

input#purchase, input.checkout, .btn-border {
  padding: 4px 20px;
  font-family: 'BebasNeue', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  border: 3px #D39229 solid;
  border-radius: 0px;
  cursor: pointer;
  color: #D39229;
  background: rgba(0, 0, 0, 0);
  /* I couldn't tell if you needed this or not so I just left it alone*/
  align-items: start;
}