css - 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 浏览器的顶部位置不同。它大约是 50 像素。

我已经阅读了其他说明原因的答案，但是如何解决这个问题？

Answer 1

我找到了解决方案。

我检查操作系统以设置位置：

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

尽管这可能是一种解决方法。