Warum wird diese Schriftart abgeschnitten, egal was Sie tun? ⇐ CSS

[Anonymous]

Ich verwende die Google-Schriftart Almarai mit einfacher Eingabesteuerung.
Und meine Arbeitsumgebung ist wie folgt:

• Windows 10, aktueller Edge-Browser
• Neueste Next.Js + Tailwind CSS + Shadcn
• CSS-Codes in -> globals.css
• Seiten sind im Typskript

Aber warum schneidet diese Schriftart einige Buchstaben ab, wie im Bild unten?


Und dieses Verhalten tritt sowohl im standardmäßigen Next.js-Eingabesteuerelement als auch im Shadcn-Eingabesteuerelement auf!
Ich habe dieses CSS ausprobiert, aber es funktioniert überhaupt nicht und selbst die KI konnte es nicht herausfinden.

Code: Select all

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

Code: Select all

Also, was ist los? Handelt es sich um ein Google-Font-Problem? Oder gibt es neue magische Zeilen, die ich herausfinden muss?
Außerdem liegt das Problem nur bei der Eingabesteuerung und andere Steuerelemente sind in Ordnung.