Schriftstärke
Die Stärke der Buchstaben (font-weight) setzen die Klassen font- mit dem Namen einer Stärke. font-bold kennst du schon, hier sind alle:
| Klasse | font-weight |
|---|---|
font-thin | 100 |
font-extralight | 200 |
font-light | 300 |
font-normal | 400 |
font-medium | 500 |
font-semibold | 600 |
font-bold | 700 |
font-extrabold | 800 |
font-black | 900 |
Am häufigsten verwendest du font-normal für normalen Text, font-medium und font-semibold für Text, der ein wenig hervorstechen soll, und font-bold oder font-extrabold für Überschriften. Wie du aus dem CSS-Kurs weißt, sieht eine Schrift nur in den Stärken unterschiedlich aus, die sie wirklich hat. Tailwind verwendet die Systemschrift des Geräts (zum Beispiel Segoe UI unter Windows und San Francisco auf einem Mac), die viele Stärken hat, du siehst den Unterschied also meist.
Wir machen den Namen noch fetter und geben dem kleinen Text des Badges etwas mehr Gewicht, damit er knackig wirkt. Wie bei den Größen ersetzt du font-bold, statt eine zweite Stärke hinzuzufügen.
So schreibst du es:
Anweisungen
- 1
Ersetze im Attribut
classder Überschrifth1die Klassefont-bolddurchfont-extrabold. - 2
Füge dem Badge „Verspielt“ die Klasse
font-semiboldhinzu.