Rodzina czcionek

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 18 z 76.

W CSS właściwość font-family służy do określania kroju pisma dla tekstu wewnątrz elementu HTML. Ta właściwość pozwala podać preferowane czcionki dla tekstu. Jeśli pierwsza czcionka nie jest dostępna, przeglądarka użyje następnej z listy, zapewniając podobny wygląd.

Oto podstawowa składnia użycia właściwości font-family:

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

font1, font2: Preferowane nazwy rodzin czcionek, wymienione w kolejności preferencji. Jeśli font1 jest niedostępna, przeglądarka spróbuje użyć font2 i tak dalej.

generic-family: Nazwa ogólnej rodziny czcionek, taka jak serif, sans-serif, monospace, cursive lub fantasy. Służy jako czcionka zastępcza, jeśli żadna z określonych czcionek nie jest dostępna.

Podczas podawania nazw rodzin czcionek należy przestrzegać tych wskazówek:

Jeśli nazwa rodziny czcionek zawiera spację, należy ją ująć w cudzysłów (np. "Times New Roman", "Courier New").

Wiele nazw rodzin czcionek należy oddzielać przecinkami.

Dobrą praktyką jest umieszczenie ogólnej rodziny czcionek na końcu listy, aby zapewnić użycie odpowiedniej czcionki zastępczej, jeśli żadna z określonych czcionek nie jest dostępna.

Na przykład:

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

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>) i akapitem (<p>). Twoim zadaniem jest użycie właściwości font-family do stylizacji tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw wartość font-family na "Times New Roman", Times, serif.
Napisz regułę CSS, która wybiera element <p>. Ustaw wartość font-family na Arial, Helvetica, sans-serif.

Spróbuj swoich sił

<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>