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