Tutorial Belajar CSS Bagian 41 : Cara Menggunakan Property Font Family di CSS

0
37

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 40 : Cara Menggunakan Property Font-Size di CSS. Kali ini,kita akan belajar cara menggunakan property font-family di CSS untukmengatur jenis huruf di website.

Properti CSS ini digunakan untuk menyediakan daftar keluarga font yang dipisahkan koma. Ini mengatur font-face untuk konten teks dari suatu elemen.

Properti ini dapat menampung banyak nama font sebagai sistem fallback, yaitu, jika satu font tidak didukung di browser, font lainnya dapat digunakan.

Font-family yang berbeda digunakan untuk membuat halaman web yang menarik.

Ada dua jenis nama font-family di CSS, yang didefinisikan di bawah ini:

  • family-name : Ini adalah nama font-family seperti “Courier”, “Arial”, “Times”, dll.
  • generic-family : Ini adalah nama keluarga generik yang mencakup lima kategori, yaitu “serif”, “sans-serif”, “cursive”, “fantasy”, dan “monospace”. Itu harus ditempatkan terakhir dalam daftar nama keluarga font.

Mari kita lihat apa saja kategori generic-family.

  • Serif : Ini digunakan saat kita menulis teks untuk dicetak, seperti buku, majalah, koran, dll. Ini termasuk font-family seperti Georgia, Garamond, Times New Roman, Minion, dan banyak lagi.
  • Sans-serif : Ini adalah gaya modern, formal, dan sederhana. Ini banyak digunakan tetapi paling sering dalam bentuk teks digital. Ini termasuk font-family yaitu Arial, Calibri, Verdana, Futura, Lato, dan banyak lagi.
  • Cursive : Ini terutama digunakan untuk menulis surat undangan, pesan informal, dll. Ini seperti teks tulisan tangan yang ditulis dengan pena atau kuas. Keluarga font yang termasuk di dalamnya adalah Insolente, Corsiva, Flanella, Belluccia, Zapfino, dan banyak lagi.
  • Monospace : Ini untuk instruksi, alamat surat, teks yang diketik, dll. Ini termasuk font-family yaitu Monaco, SimSun, Courier, Consolas, Inconsolata, dan banyak lagi.
  • Fantasy: Ini membuat teks ekspresif, dekoratif, dan berdampak. Ini termasuk font-family yaitu Impact, Copperplate, Cracked, Critter, dan banyak lagi.

Sintaksis

font-family: family-name|generic-family|initial|inherit;

Nilai

Mari kita lihat nilai properti font-family.

family-name/generic-family: Ini adalah daftar nama font-family dan nama generic-family.

  • initial: Digunakan untuk mengatur properti ke nilai defaultnya.
  • inherit: Ini digunakan untuk mewarisi properti dari elemen induknya.

Mari kita pahami dengan menggunakan ilustrasi.

Contoh :

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  body{  
    text-align:center;  
      }  
  h1.a {  
    font-family: "Times New Roman", Times, serif;  
    color:Red;  
      }  

  h2.b {  
    font-family: Arial, Helvetica, sans-serif;  
    color:blue;  
      }  
</style>  
</head>  
<body>  
    <h1>Property font-family </h1>  
    <h1 class="a">Halo dunia :) :)</h1>  
    <h2 class="b">Selamat datang di mbahwp.com</h2>  
</body>  
</html>  

Hasil dari kode di atas adalah :

Semoga tutorial ini bisa membantu Anda belajar cara menggunakan property font-family di CSS untuk mengatur jenis huruf dalam tampilan website.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.