Properti font CSS mendefinisikan font family, boldness, size, dan style teks.
CSS Font Family
Dalam CSS, ada dua jenis nama family font:
- generic family - kelompok font dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
- Font family - keluarga font tertentu (seperti "Times New Roman" atau "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Font Serif memiliki garis kecil di ujung pada beberapa karakter |
| Sans-serif | Arial Verdana | "Sans" berarti tanpa - font ini tidak memiliki garis-garis pada ujung karakter |
| Monospace | Courier New Lucida Console | Semua karakter monospace memiliki lebar yang sama |
Catatan: Pada layar komputer, sans-serif font dianggap lebih mudah untuk dibaca daripada font serif.
Font Family
font family teks yang dibuat dengan properti font-family.
Properti font-family harus memegang beberapa nama font sebagai "fallback" sistem. 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 generic family, jika tidak ada font lain yang tersedia.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:
p {
font-family: "Times New Roman", Times, serif;
}
Font Style
Properti font-style banyak digunakan untuk menetapkan teks miring.
Properti ini memiliki tiga nilai:
- normal - Teks ditampilkan biasanya
- italic - Teks ditampilkan dengan huruf miring
- oblique - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Ukuran Huruf
Properti font-size menetapkan ukuran teks.
Mampu mengatur ukuran teks 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 judul dan <p> untuk paragraf.
Nilai font-size dapat menjadi ukuran mutlak, atau relatif.
Ukuran absolut:
- 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 output diketahui
Ukuran relatif:
- Mengatur ukuran relatif terhadap elemen sekitarnya
- Memungkinkan pengguna untuk mengubah ukuran teks dalam browser
Mengatur Ukuran Font Dengan Pixel
Mengatur ukuran teks dengan piksel memberi Anda kontrol penuh atas ukuran teks:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Mengatur Ukuran Font Dengan Em
Untuk memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser), banyak pengembang menggunakan em bukan 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 ke em menggunakan rumus ini: pixels / 16 = em
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 */
}
Dalam contoh di atas, ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran em, adalah mungkin untuk menyesuaikan ukuran teks dalam semua browser.
Sayangnya, masih ada masalah dengan versi IE. Teks menjadi lebih besar dari yang seharusnya bila dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em
Solusi yang bekerja di semua browser, adalah untuk mengatur font-size default di persen untuk <body> Elemen:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
0 komentar:
Posting Komentar