跨浏览器字体大小调整

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