css - 跨浏览器字体大小

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