CSS Fonts
CSS properti font menentukan keluarga font, keberanian, ukuran, dan gaya text .
Perbedaan Antara Serif dan Sans-serif Font
CSS Font Keluarga
Dalam CSS, ada dua jenis nama keluarga font :
- generik keluarga – sebuah kelompok keluarga font dengan tampilan yang sama (seperti “Serif” atau “Monospace”)
- Font keluarga – keluarga font tertentu (seperti “Times New Roman” atau “Arial”)
| Generik keluarga | Font keluarga | Deskripsi |
|---|---|---|
| Serif | Times New Roman Georgia |
Font serif memiliki garis-garis kecil di bagian berakhir pada beberapa karakter |
| Sans-serif | Arial Verdana |
“Sans” berarti tanpa – font-font ini tidak memiliki garis di ujung karakter |
| Monospace | Courier New Lucida Console |
Semua karakter huruf monospace memiliki lebar yang sama |
Font Keluarga
Keluarga font teks yang dibuat dengan properti font-family.
Properti font-keluarga harus terus beberapa nama font sebagai sistem “fallback”. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti font-family : “Times New Roman”
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan-koma :
contoh :
p{font-family:”Times New Roman”, Times, serif;}
Font Style
Properti font-style banyak digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai:
- normal – Teks ditampilkan biasanya
- miring – Teks ditampilkan dalam huruf miring
- miring – teks ini “condong” (miring sangat mirip dengan miring, tapi kurang didukung)
Contoh :
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: miring;}
Ukuran Font
Properti font-size set ukuran teks.
Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf.
Selalu gunakan tag HTML yang tepat, seperti :
<h1> – <h6> untuk heading dan paragraf <p>
Nilai font-size bisa menjadi ukuran absolut, atau relatif .
- Absolute Ukuran : Mengatur teks ke ukuran tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
Ukuran absolut berguna ketika ukuran fisik dari output diketahui - Ukuran Relatif : Mengatur ukuran relatif terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks di browser
Jika Anda tidak menetapkan ukuran font, ukuran standar untuk teks normal, seperti paragraf, adalah 16px (16px = 1em)
Mengatur Ukuran Font dengan Pixel
Mengatur ukuran teks dengan piksel, memberi Anda kontrol penuh atas ukuran teks :
Contoh :
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}
Catatan : contoh di atas memungkinkan Firefox, Chrome, dan Safari untuk mengubah ukuran teks, tapi tidak Internet Explorer.
Mengatur Ukuran Font dengan Em
Untuk menghindari masalah ukuran dengan Internet Explorer, banyak pengembang menggunakan em daripada piksel.
Unit ukuran em direkomendasikan oleh W3C.
1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default 1em adalah 16px.
Ukuran dapat dihitung dari piksel untuk mereka dengan menggunakan rumus ini: piksel / 16 = em
Contoh :
h1 {font-size: 2.5em;} / * 40px/16 = 2.5em * /
h2 {font-size: 1.875em;} / * 30px/16 = 1.875em * /
p {font-size: 0.875em;} / * 14px/16 = 0.875em * /
Catatan : Dalam contoh di atas, ukuran teks dalam mereka adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran mereka, adalah mungkin untuk menyesuaikan ukuran teks dalam semua browser.
Sayangnya, masih ada masalah dengan IE. Ketika mengubah ukuran teks, menjadi lebih besar dari seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em
body {font-size: 100%;}h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}