Schriftfamilie

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 18 von 76.

In CSS wird die Eigenschaft font-family verwendet, um die Schriftart für Text innerhalb eines HTML-Elements festzulegen. Mit dieser Eigenschaft kannst du bevorzugte Schriftarten für deinen Text auflisten. Wenn die erste Schriftart nicht verfügbar ist, verwendet der Browser die nächste in der Liste, um ein ähnliches Erscheinungsbild zu gewährleisten.

Hier ist die grundlegende Syntax für die Verwendung der font-family-Eigenschaft:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Die bevorzugten Schriftfamiliennamen, aufgelistet in der Reihenfolge ihrer Priorität. Wenn font1 nicht verfügbar ist, wird der Browser font2 versuchen, und so weiter.

generic-family: Ein generischer Schriftfamilienname, wie zum Beispiel serif, sans-serif, monospace, cursive oder fantasy. Dies dient als Rückfalloption, falls keine der angegebenen Schriftarten verfügbar ist.

Bei der Angabe von Schriftfamiliennamen ist es wichtig, diese Richtlinien zu befolgen:

Wenn ein Schriftfamilienname Leerzeichen enthält, sollte er in Anführungszeichen gesetzt werden (z. B. "Times New Roman", "Courier New").

Mehrere Schriftfamiliennamen sollten durch Kommas getrennt werden.

Es ist eine gute Praxis, eine generische Schriftfamilie als letzte Option in der Liste anzugeben, um sicherzustellen, dass ein geeigneter Ersatz verwendet wird, falls keine der angegebenen Schriftarten verfügbar ist.

Zum Beispiel:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>) und einem Absatz (<p>) gegeben. Ihre Aufgabe ist es, die Eigenschaft font-family 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 die font-family auf "Times New Roman", Times, serif.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie die font-family auf Arial, Helvetica, sans-serif.

Probier es selbst

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