Html semibold und bold schauen gleich aus?
Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.
Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.
Code zum Nachmachen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Weight Test</title>
<style>
body {
font-family: Arial, sans-serif; /* Using a widely available font */
}
.thin {
font-weight: 100;
}
.light {
font-weight: 300;
}
.normal {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.semibold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.extrabold {
font-weight: 800;
}
.black {
font-weight: 900;
}
</style>
</head>
<body>
<h1>Font Weight Test</h1>
<p class="thin">This is thin text (100).</p>
<p class="light">This is light text (300).</p>
<p class="normal">This is normal text (400).</p>
<p class="medium">This is medium text (500).</p>
<p class="semibold">This is semibold text (600).</p>
<p class="bold">This is bold text (700).</p>
<p class="extrabold">This is extrabold text (800).</p>
<p class="black">This is black text (900).</p>
</body>
</html>
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webentwicklung, Programmieren & Softwareentwicklung
Dan unterstützt der von dir genutzte Font offensichtlich nicht alle Schriftschnitte. Die meisten Fonts haben nur Regular und Bold sowie diese noch als Italic. Manche Fonts haben dann auch noch Thin, Medium, Extrabold, Black oder andere.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.