文本未在垂直方向完美居中，因为字体的后代稍大

如何解决文本未在垂直方向完美居中，因为字体的后代稍大

当我在网上试用 Calibre 字体时，我注意到文本没有正确地垂直居中。经过研究，我发现字体的后代比上升字体略粗。

下图是figma中的calibre字体，清楚地表明后代更大

因为它在figma上很容易被纠正。但是当我在网上试用它时，我遇到了同样的问题。文本没有正确地在垂直方向居中。

    <style>
            @font-face {
                font-family: "calibre-semi-bold";
                src: url(./calibre-semibold-webfont.ttf);
            }
    
            .text {
                font-family: "calibre-semi-bold";
                font-size: 6em;
            }
    
            .container {
                background-color: orange;
                height: 120px;
                width: 70%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 90px;
            }
        </style>
<body>
    <div class="container">
        <p class="text">
            Cutting Edge technology
        </p>
    </div>
</body>

经过一番谷歌搜索，我发现实际上有一个名为 descent-override 的属性可以在 @font-face 中使用它来解决问题。但是，MDN 提到 Safari 和其他旧版本浏览器不支持该属性。

@font-face {
            font-family: "calibre-semi-bold";
            src: url(./calibre-semibold-webfont.ttf);
            descent-override: 17%;
        }

使用descent-override后

这种差异在图片中很难注意到，但在直播网络上却非常显着。

是否有任何适当的方法可以在不影响浏览器兼容性的情况下垂直居中此文本？谢谢。

解决方法

我会将 line-height: 100%; 添加到 .text 元素，以将行高设置为与字体大小相同的大小。

除此之外，您还可以在该元素上添加 position:relative 并使用 top: ... 设置（该值的反复试验）以使其垂直偏移。