Jenis Font

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 18 dari 76.

Dalam CSS, property font-family digunakan untuk menentukan jenis huruf pada teks di dalam elemen HTML. Property ini memungkinkan kamu mencantumkan font yang diutamakan untuk teksmu. Jika font pertama tidak tersedia, browser akan menggunakan font berikutnya dalam daftar, sehingga tampilannya tetap serupa.

Berikut sintaks dasar untuk menggunakan property font-family:

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

font1, font2: Nama keluarga font yang diutamakan, diurutkan berdasarkan prioritas. Jika font1 tidak tersedia, browser akan mencoba font2, dan seterusnya.

generic-family: Nama keluarga font generik, seperti serif, sans-serif, monospace, cursive, atau fantasy. Ini berfungsi sebagai pilihan cadangan jika tidak satu pun font yang ditentukan tersedia.

Saat menentukan nama keluarga font, penting untuk mengikuti panduan berikut:

Jika nama keluarga font mengandung spasi, nama tersebut harus diapit tanda kutip (misalnya, "Times New Roman", "Courier New").

Beberapa nama font family harus dipisahkan dengan koma.

Sebaiknya sertakan keluarga font generik sebagai opsi terakhir dalam daftar untuk memastikan font pengganti yang sesuai digunakan jika tidak ada font yang ditentukan tersedia.

Sebagai contoh:

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

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah heading (<h1>) dan paragraf (<p>). Tugasmu adalah menggunakan property font-family untuk mengatur gaya elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur font-family ke "Times New Roman", Times, serif.
Tulis aturan CSS yang menargetkan elemen <p>. Atur font-family ke Arial, Helvetica, sans-serif.

Coba sendiri

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