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;
}

并从我的位置导入字体

现在字体在Windows中正确呈现，但它与iPhone和Mac有问题。 文字正在向上移动。

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

在这里演示

Answer 1

我在firefox和chrome上使用这个字体时遇到了麻烦（获得正确的大小和行高）
我对代码进行了修改，这对我来说很好
（无法分辨哪些对齐项目虽然从未见过或曾经使用过）

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;
}