Font CSS

Pemilihan font yang benar untuk situs web Anda penting!

Pemilihan font penting

Pemilihan font yang benar akan mempengaruhi pengalaman pengguna situs web Anda secara besar-besaran.

Font yang benar dapat menciptakan citra kuat bagi merek Anda.

Pemilihan font yang mudah dibaca penting. Font menambah nilai teks Anda. Memilih warna dan ukuran teks font yang benar juga penting.

Familia font umum

Pada CSS, ada lima keluarga font umum:

  • Font dengan garis bawah (Serif) - ada penekanan kecil di sebelah边缘masing-masing huruf. Mereka menciptakan penampilan formasi dan elegan.
  • Font tanpa garis bawah (Sans-serif) - garis font sederhana (tanpa tebal). Mereka menciptakan penampilan modern dan sederhana.
  • Font lebar tetap (Monospace) - setiap huruf disini memiliki lebar tetap. Mereka menciptakan penampilan mekanis.
  • Font tangan (Cursive) - meniru tinta penulisan manusia.
  • Font imajinasi (Fantasy) - adalah font yang berfungsi untuk dekorasi/dalam bahasa.

Semua nama font yang berbeda termasuk satu dari lima serupa keluarga font umum.

Perbedaan antara font Serif dan Sans-serif

Serif vs. Sans-serif

Petunjuk:Pada layar komputer, font tanpa garis bawah dianggap lebih mudah dibaca daripada font dengan garis bawah.

Beberapa contoh font

Familia font umum Contoh nama font
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Atribut font-family CSS

Pada CSS, kami menggunakan atribut font-family untuk menentukan font teks.

Atribut font-family harus mengandung beberapa nama font sebagai sistem 'back-up' untuk memastikan kompatibilitas maksimal antara browser/operating system. Mulai dengan font yang Anda butuhkan dan diakhiri dengan seri umum (jika tidak ada font lain yang tersedia, biarkan browser memilih font yang mirip di dalam seri umum). Nama font harus dipisahkan dengan koma.

Catatan:Jika nama font berisi lebih dari satu kata, maka harus di kutip, seperti: "Times New Roman".

Contoh

Tentukan font yang berbeda untuk tiga paragraf:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Coba sendiri