Schriftfamilie

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

In CSS wird die font-family-Eigenschaft verwendet, um die Schriftart für Text innerhalb eines HTML-Elements festzulegen. Diese Eigenschaft ermöglicht es Ihnen, bevorzugte Schriftarten für Ihren Text aufzulisten. Wenn die erste Schriftart nicht verfügbar ist, verwendet der Browser die nächste in der Liste, um ein ähnliches Aussehen 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.

Spickzettel

Die Eigenschaft font-family legt die Schriftart für Text fest. Listen Sie bevorzugte Schriftarten der Reihe nach auf – wenn die erste nicht verfügbar ist, verwendet der Browser die nächste.

Grundlegende Syntax:

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

Richtlinien:

Schriftartnamen mit Leerzeichen benötigen Anführungszeichen: "Times New Roman"
Trennen Sie mehrere Schriftarten durch Kommas
Fügen Sie eine generische Familie (serif, sans-serif, monospace, cursive, fantasy) als Fallback hinzu

Beispiel:

p {
    font-family: 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>