Schriftstärke

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 20 von 76.

In CSS wird die font-weight-Eigenschaft verwendet, um die Fettigkeit oder Stärke von Text innerhalb eines HTML-Elements zu steuern.

Gängige numerische Werte für font-weight sind:

100: Dünn
200: Extraleicht
300: Leicht

400: Normal
500: Medium
600: Halbfett

700: Fett
800: Extrafett
900: Schwarz

Häufige Schlüsselwortwerte für font-weight sind:

normal: Entspricht 400
bold: Entspricht 700

lighter: Gibt eine geringere Stärke als das Elternelement an
bolder: Gibt eine größere Stärke als das Elternelement an

Zum Beispiel:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Ihre Aufgabe ist es, die Eigenschaft font-weight zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie font-weight auf 900.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie font-weight auf lighter.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie font-weight auf 600.

Spickzettel

Die Eigenschaft font-weight steuert die Fettigkeit oder Stärke von Text.

Numerische Werte:

100: Thin (Dünn)
200: Extra Light (Extra Leicht)
300: Light (Leicht)
400: Normal
500: Medium (Mittel)
600: Semi Bold (Halbfett)
700: Bold (Fett)
800: Extra Bold (Extra Fett)
900: Black (Schwarz)

Schlüsselwort-Werte:

normal: Entspricht 400
bold: Entspricht 700
lighter: Geringeres Gewicht als das Elternelement
bolder: Höheres Gewicht als das Elternelement

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Probier es selbst

<html>
<head>
    <title>Font Weight</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>