Шрифт в формате .otf не центрирован по вертикали. ⇐ CSS

[Anonymous]

Я получил шрифт от дизайнеров и столкнулся с проблемой вертикального выравнивания
Я добавил этот шрифт в свое приложение с помощью Js

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

        const font = {
family: `Suisse Int'l`,
style: 'normal',
display: 'fallback',
weight: 500,
src: '/assets/fonts/SuisseIntl-BlackItalic.otf',
locale: 'Suisse',
},

const { family, src, ...descriptor } = font;
const fontFace = new FontFace(family, `url(${src})`, {
...descriptor,
weight: descriptor.weight.toString(),
});

const font = await fontFace.load().then((loadedFontFace) => {
document.fonts.add(loadedFontFace);

return font;
}

document.documentElement.style.setProperty('--font-family', `${font.family}, sans-serif`);

Но после загрузки я вижу, что шрифт не выровнен по вертикали
не по центру по вертикали
Как мы видим, что символ находится выше базовой линии.
Это пример простого шрифта без засечек
с вертикальным центром
Это простой элемент p без подэлементы
Я пытался выровнять его по вертикали, используявертикальное выравнивание с display: inline-lock и line-height, но это не помогло .
Кроме того, когда я загрузил пробную версию этого шрифта с официального сайта в формате .ttf, проблема была решена, и символы были отцентрированы, как и ожидалось. Также решена проблема переопределения восхождения, но она поддерживается не всеми браузерами.
Не могли бы вы помочь с этим и сказать, что может быть не так? Потому что мне кажется, что проблема в файле формата .otf.

Подробнее здесь: https://stackoverflow.com/questions/787 ... vertically