跨浏览器字体大小

Question

我正在通过@font-face 使用自定义字体，并且在开发过程中我一直在 Chrome 上测试该网站。

这里是CSS中的字体添加部分供参考

@font-face {
font-family: 'skarpaltultra_light';
src: url('font/light-webfont.eot');
src: url('font/light-webfont.eot?#iefix') format('embedded-opentype'),
url('font/light-webfont.woff2') format('woff2'),
url('font/light-webfont.woff') format('woff'),
url('font/light-webfont.ttf') format('truetype'),
url('font/light-webfont.svg#skarpaltultra_light') format('svg');
font-weight: normal;
font-style: normal; }
html, body {
    height: 100%;
    width: 100%;
    font-family: 'skarpaltultra_light', Tahoma, Geneva, sans-serif;
    font-size: 62.5%;
    color: #fff;
}

注意 - 使用 62.5% 是因为我正在尝试使字体跨浏览器兼容的不同方法以及设置字体大小的技术之一为此，然后在页面的其余部分使用em 进行字体大小调整

现在我在 Firefox、Edge、 等上打开它。我意识到字体大小都乱七八糟了，它们弄乱了我的整个布局。

这是网站在 Chrome 上的外观截图

这是 Firefox 上的外观

我今天正准备将beta版本交给客户，结果发生了这种情况。我该如何解决这个问题？

Answer 1

Firefox 和 Chrome 的字体大小相同。

这是在两种浏览器中的样子：

如您所见，两种浏览器都将字体大小计算为93.75px。

经过几次调整：

h1 {
    background-clip: padding-box;
    border: 20px double #fff;
    color: #fff;
    display: inline-block;
    font-size: 10em;
    left: 50%;
    padding: 20px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10%;
    transform: translateX(-50%);
}
.intro p {
    color: #fff;
    font-size: 5em;
    padding: 50px;
    position: absolute;
    text-align: justify;
    top: 40%;
}
table {
    bottom: 10%;
    color: #000;
    font-size: 3em;
    margin-left: 150px;
    position: absolute;
}