Font CSS
Memilih font yang tepat untuk situs web Anda adalah penting!
Pemilihan Font Itu Penting
Memilih font yang tepat memiliki dampak besar pada bagaimana pembaca mengalami situs web.
Font yang tepat dapat menciptakan identitas yang kuat untuk merek Anda.
Menggunakan font yang mudah dibaca adalah penting. Font menambah nilai pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang benar untuk font.
Keluarga Font Umum
Di CSS ada lima keluarga font generik:
- Font serif memiliki goresan kecil di tepi setiap huruf. Mereka menciptakan rasa formalitas dan keanggunan.
- Font sans-serif memiliki garis yang bersih (tidak ada goresan kecil yang menempel). Mereka menciptakan tampilan modern dan minimalis.
- Font monospace - di sini semua huruf memiliki lebar tetap yang sama. Mereka menciptakan tampilan mekanis.
- Font kursif meniru tulisan tangan manusia.
- Font fantasi adalah font dekoratif/menyenangkan.
Semua nama font yang berbeda milik salah satu 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
| Generic Font Family | Examples of Font Names |
|---|---|
| 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 font-familyproperti untuk menentukan font teks.
Catatan : Jika nama font lebih dari satu kata, harus dalam tanda petik, seperti: "Times New Roman".
Tip: Properti font-familyharus memiliki 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). Nama font harus dipisahkan dengan koma. Baca lebih lanjut tentang font fallback di bab berikutnya .
Contoh
Tentukan 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;
}