时间戳

首页 > 解决方案 > 文本在垂直方向上没有完全居中，因为字体的后代稍大

html - 文本在垂直方向上没有完全居中，因为字体的后代稍大

问题描述

当我在网上试用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 在此处输入图像描述后 ，图像中很难注意到差异，但在实时网络上却非常显着。

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

标签： htmlcssfontsfigma

解决方案

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

除此之外，您可以在该元素上添加position:relative和使用top: ...设置（值的试验和错误）以垂直偏移它。

推荐阅读