html - 为什么相同的字体在不同的设备上有不同的高度/基线？

Question

我一直在不同的设备上测试相同的字体(Big John 是字体的名称)。字体的高度或基线在不同设备上不一致。

图片如下:

Windows Chrome:

Android Chrome:

ma​​cOS Chrome:

按钮的 CSS:

.btn-grey{
 letter-spacing: 2px;
 font-size: 30px;
 color: white;
 border-radius: 15px;
 padding: 2% 5% 2% 5%;
 font-weight: bold;
 background: #CBCBCB;
}

.btn-content{
 background: blue;
}

按钮的 HTML:

<button type="button" className="btn btn-grey">
   <div className={"btn-content"}>VISIT THE WEBSITE</div>
</button>

Answer 1

您没有为该元素设置 line-height 或 vertical-alignment 属性，因此每个浏览器都会回退到它自己的默认样式。当然，不同的浏览器有不同的默认样式。

解决方案是显式设置您想要的样式，例如通过在您的声明中添加以下内容:

btn-grey {
    line-height: 1;
    vertical-align: middle;
}

仅供引用，但 className 不是有效的 html 属性，它应该只是 class=