Cara Merubah Jenis Font HTML Menggunakan CSS font-family

Secara default/bawaan, halaman web yang kita buat akan menggunakan font standar yaitu Times New Roman. Namun jangan khawatir jika anda tidak suka dengan jenis font Times New Roman kita dapat merubahnya dengan property font-family.

Font Family

font adalah jenis atau bentuk dari huruf yang digunakan dalam sebuah halaman web, kita dapat mengganti jenis font halaman website kita. misalnya font-family: calibri;

Namun perlu diketahui tidak semua PC memiliki font yang kita tentukan tersebut, misalnya ketika kita menentukan font-family dengan calibri, maka pada PC dengan sistem operasi Linux, tidak akan ditemukan font-tersebut.

untuk mengatasi hal ini kita bisa membuat font lebih dari satu, dan agar semua jenis font ini tersedia disemua sistem operasi maka kita bisa memakai jenis font yang standar.

Jenis-jenis Font Standar CSS

Font Generic adalah jenis font standar yang pasti tersedia semua sistem. secara keseluruhan terdapat 5 jenis font generic, yaitu “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

sedangkan nama font-family seperti “times”, “courier”, “arial”, dan lain-lain.

Font Serif

Kata Serif bisa diartikan sebagai kait, jadi jenis huruf serif memiliki kait disetiap ujung hurufnya. Font jenis serif yang paling terkenal adalah Times New Roman.

Font Sans-serif

Arti dari sans, adalah “tanpa”. Jadi sans-serif bisa diartikan sebagai jenis font tanpa kait. Yang paling umum digunakan untuk jenis sans-serif adalah arial.

Font Monospace

Font berjenis ‘monospace’ adalah tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono.

Font Cursive

Font jenis ‘cursive’ adalah jenis font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans.

Font Fantasy

Font dengan jenis ‘fantasy’ adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll.

Property font-family

untuk mengubah jenis huruf atau font kita bisa memakai property font-family, contohnya

<!DOCTYPE html>
  <html>
  <head>
  <style>
  p.serif {
  font-family: "Times New Roman", Times, serif;
  }
p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
  }
  </style>
  </head>
  <body>
<h1>CSS font-family</h1>
  <p class="serif">Paragraf ini memakai font Times New Roman.</p>
  <p class="sansserif">Paragraf ini memakai font Arial font.</p>
</body>
  </html>

contoh diatas saya memakai font-family: "Times New Roman", Times, serif; dan font-family: Arial, Helvetica, sans-serif; saya memakai 3 jenis font untuk tap p class serif, kenapa demikian?

Ketika font jenis Times New Roman tidak ditemukan, maka yang akan digunakan adalah Times, ketika tidak ditemukan font Times maka serif yang akan digunakan, begitu seterusnya.

jadi kita bisa membuat jenis font lebih dari satu dengan begitu web browser akan mencoba mencocokan jenis font yang ditampilkan dengan font yang kita tentukan. agar tampilan dari website kita tidak berbeda dengan yang kita lihat di komputer kita.

Keyword:

  • jenis huruf untuk html css
  • menggunakan style untuk merubah font html

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas