шрифта рендеринга проблема в IOS

Question

Я пытался использовать BabeNeue шрифт, который доступен на font-squirrel

Я использовал следующий код

<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

Теперь шрифт правильно отображается в окнах, но он имеет проблемы с iPhone и Mac. текст сдвигает бит вверх.

Теперь, если я изменить кнопку шрифт Arial, он прекрасно работает на всех браузерах и устройствах.

Demo here

Answer 1

У меня были неприятности с этим шрифтом на светлячок и хром (получение размер и высота линии справа)
Я возился с кодом немного, и это работало отлично для меня
(не мог сказать, что выравнивает-элементы делали, хотя никогда не видели и не использовали его раньше)

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