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>
HTML,
Webseite,
CSS,
Mozilla Firefox,
Google Chrome,
HTML5,
Code,
Programmiersprache,
Webdesign,
Webentwicklung,
Frontend,
Visual Studio Code,
Microsoft Edge
