Почему этот шрифт обрезается, что бы вы ни делали? ⇐ Html

[Anonymous]

Я использую шрифт Google Almarai с простым контролем ввода.
И моя рабочая среда следующая:

• Windows 10, последняя версия браузера Edge
• Последняя версия Next.Js + Tailwind CSS + Shadcn
• CSS-коды -> globals.css
• Страницы написаны шрифтом script

Но почему этот шрифт обрезает некоторые буквы, как на изображении ниже?


И такое поведение наблюдается как в элементе управления вводом Next.js по умолчанию, так и в элементе управления вводом Shadcn!
Я попробовал этот CSS, но он вообще не работает, и даже ИИ не смог этого понять.

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

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

@font-face {
font-family: "Almarai", sans-serif;
font-style: normal;
font-weight: normal;
font-display: swap;
src: url("/fonts/Almarai/Almarai-Regular.ttf") format("truetype");
}

input.arabic-input {
font-family: "Almarai", sans-serif;
background-color: burlywood;
font-size: 16px;
line-height: 2.6;
height: auto;
min-height: calc(1em * 2.6 + 24px);
padding-block: 22px;
padding-inline: 22px;
box-sizing: border-box;
overflow: visible;
-webkit-appearance: none;
}

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

Так что же не так? Это проблема со шрифтом Google? Или мне нужно во всем разобраться?
Кроме того, проблема только с элементом управления вводом, а с остальными элементами управления все в порядке.

Подробнее здесь: https://stackoverflow.com/questions/798 ... hat-you-do