Положение встроенного шрифта в Windows и Mac OSX отличается

Question

Ниже мой встроенный код шрифта

@font-face {
    font-family: 'futura';
    src: url('../fonts/Futura_CondensedMedium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

И тогда я использую шрифт так:

#percentage
{
    position:absolute;
    top:90px;
    font-family:futura, Arial, sans-serif;
    font-size:700px;
    line-height:700px;
    font-weight:bolder;
    color:#87847b;
    z-index:2;
    display:inline-block;
}

Я только добавил kine-height, чтобы увидеть, имеет ли это значение, но обнаружил, что это не так.

Моя проблема в том, что все выглядит отлично во всех браузерах окон, но обнаружил, что верхняя позиция отличается во всех браузерах Mac. Это примерно на 50px.

Я прочитал другие ответы, в которых изложены причины этого, но как решить эту проблему?

Answer 1

Я нашел решение.

Я проверяю операционную систему, чтобы установить позицию:

if(navigator.platform.match('Mac') !== null) {
    $('#percentage').css('top', '-30px');
}

Хотя это может быть обходной путь.