Текст не идеально центрирован по вертикали, поскольку потомок шрифта немного больше. ⇐ CSS

[Anonymous]

Когда я опробовал шрифт Calibre в Интернете, я заметил, что текст неправильно центрирован по вертикали. После исследования я выяснил, что потомок шрифта немного толще, чем восходящий.
На изображении ниже показан шрифт калибра в Figma, который ясно показывает, что потомок больше


Как это было на фигме, это легко исправить. Но когда я попробовал это в Интернете, я столкнулся с той же проблемой. Текст неправильно центрируется по вертикали.




Я прикрепил код здесь.

Код: Выделить всё

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



Cutting Edge technology

После некоторого поиска в Google я обнаружил, что на самом деле существует свойство descent-override, которое можно использовать в @font-face и которое решает проблему. Однако MDN отметил, что это свойство не будет поддерживаться в Safari и других браузерах более старых версий.

Код: Выделить всё

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

после использования descent-override

Разницу очень трудно заметить на изображении, но она очень заметна в Интернете.
Есть ли какой-нибудь правильный способ центрировать этот текст вертикально без ущерба для совместимости с браузером? Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/678 ... t-of-the-f