嵌入式字体位置在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');
}

虽然这可能是一种解决方法。