Font CSS


Pemilihan Font Itu Penting

Memilih font yang tepat memiliki dampak besar pada bagaimana pengalaman pembaca pada sebuah situs web.

Font yang tepat dapat menciptakan identitas yang kuat untuk merek Anda.

Menggunakan font yang mudah dibaca adalah hal yang penting. Font menambah nilai pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang benar untuk font.


Keluarga Font Generik

Di CSS ada lima keluarga font umum:

  1. Serif - memiliki goresan kecil di tepi setiap huruf. Mereka menciptakan rasa formalitas dan keanggunan.
  2. Sans-serif - memiliki garis yang bersih (tidak ada goresan kecil yang terpasang). Mereka menciptakan tampilan modern dan minimalis.
  3. Monospace - di sini semua huruf memiliki lebar tetap yang sama. Mereka menciptakan tampilan mekanis. 
  4. Cursive - meniru tulisan tangan manusia.
  5. Fantasy - adalah font dekoratif / lucu.

Semua nama font yang berbeda memiliki salah satu dari keluarga font generik.


Perbedaan Antara Font Serif dan Sans-serif

Catatan: Di layar komputer, font sans-serif dianggap lebih mudah dibaca daripada font serif.


Beberapa Contoh Font

Keluarga Font Generik 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


Properti font-family CSS

Di CSS, kami menggunakan properti font-family properti untuk menentukan font dari sebuah teks.

Properti font-family harus memegang beberapa nama font sebagai sistem "fallback", untuk memastikan kompatibilitas maksimum antara browser / sistem operasi. Mulailah dengan font yang Anda inginkan, dan akhiri dengan keluarga generik (agar browser memilih font serupa dalam keluarga generik, jika tidak ada font lain yang tersedia) dan nama font harus dipisahkan dengan koma.

Catatan: Jika nama font lebih dari satu kata, harus dalam tanda petik, seperti: "Times New Roman".


Contoh

Menentukan beberapa 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;
}


Sumber referensi: w3schools

Komentar

Posting Komentar