Properti Font
CSS menyediakan beberapa properti font style untuk konten teks, seperti: font-family, font-style, font-variant, font-weight dan font-size.
Font Family
Properti CSS font-family memungkinkan kalian untuk mengatur daftar prioritas nama font family dan / atau nama generic family untuk konten teks dari elemen yang dipilih.
Properti font-family dapat menampung beberapa nama font sebagai sistem fallback. Kalian harus daftarkan (masukkan) font yang kalian inginkan terlebih dahulu, lalu font apa saja yang akan diisi sebagai penggantinya jika font yang pertama tidak tersedia. Kalian harus mengakhiri daftar dengan font family generik yang terdiri atas lima font, yaitu font serif, sans-serif, monospace, cursive dan fantasy. Deklarasi font family akan terlihat seperti ini:
p {
font-family: "Times New Roman", Times, serif;
}
Catatan: Jika nama dari font family lebih dari satu kata, maka harus menggunakan quotation marks (tanda kutip), seperti "Times New Roman", "Courier New", "Trebuchet MS", dll.
Font Style
Properti font-style mengatur style font untuk konten teks suatu elemen.
Nilai yang mungkin untuk properti ini adalah: normal, italic atau oblique.
p.one {
font-style: normal;
}
p.two {
font-style: italic;
}
p.three {
font-style: oblique;
}
Font Size
Properti font-size untuk mengatur ukuran font pada konten teks suatu elemen.
Ada beberapa cara untuk menentukan nilai ukuran font, misal dengan kata kunci, piksel, atau em.
Mengatur Ukuran Font dengan Keyword
Dengan mengatur ukuran font keyword pada elemen body, Kalian
dapat mengatur relative font-sizing di manapun pada halaman tersebut, sehingga kalian
dapat dengan mudah mengatur font ke atas atau ke bawah untuk seluruh halaman
tersebut. Ukuran absolut ditentukan menggunakan salah satu kata kunci berikut: xx-small, x-small, small, medium, large, x-large, xx-large.
Ukuran relatif ditentukan menggunakan salah satu kata kunci berikut: smaller, larger.
Berikut contohnya:
body {
font-size: large;
}
h1 {
font-size: larger;
}
p {
font-size: smaller;
}
Mengatur Ukuran Font dengan Pixel
Mengatur ukuran font dalam nilai pixel (mis. 12px, 16px, dll.) Adalah pilihan yang bagus saat kalian membutuhkan akurasi piksel. Namun, hasilnya dapat bervariasi sampai batas tertentu di seluruh browser, karena mereka menggunakan algoritma yang berbeda untuk mendapatkan efek yang sama.
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
Menentukan ukuran font dalam pixel tidak accessible, karena pengguna tidak dapat mengubah ukuran font dari pengaturan browser. Misalnya, pengguna dengan penglihatan terbatas (rabun) mungkin ingin mengatur ukuran font lebih besar dari ukuran yang kalian tentukan. Karena itu, kalian harus menghindari menggunakan nilai piksel untuk menentukan ukuran font jika kalian ingin membuat desain yang inklusif.
Mengatur Font Size dengan Em
Em unit mengacu pada ukuran font dari elemen induk.
Ukuran nilai em adalah dinamis. Saat mendefinisikan properti font-size, em sama dengan ukuran font yang berlaku pada elemen induk.
Jika jika kalian mengatur ukuran font 20px pada elemen body, maka 1em = 20px dan 2em = 40px.
Jika kalian belum menetapkan ukuran font pada halaman tersebut, maka default dari browser yang akan menentukannya, yang mungkin nilainya 16px. Jadi, secara default 1em = 16px, dan 2em = 32px.
h1 {
font-size: 2em; /* 32px/16px=2em */
}
p {
font-size: 0.875em; /* 14px/16px=0.875em */
}
Warning: IE6 dan IE7 suka melebihkan ukuran sehingga ukuran teksnya menjadi terlalu besar. (tes dahulu sebelum mempublikasikannya).
Menggunakan Kombinasi Persentase dan Em
Solusi untuk mendapatkan efek yang sama pada semua browser adalah dengan mengatur font-size default dalam persentase pada elemen body. Teknik yang populer adalah mengatur font-size pada body menjadi 62,5% (yaitu 62,5% dari standarnya 16px), yang setara dengan 10px, atau 0,625em.
Sekarang kalian dapat mengatur font-size untuk setiap elemen menggunakan em, dengan konversi yang mudah diingat, dengan membagi nilai px dengan 10. Dengan cara ini 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, dan seterusnya. Lihat contoh di bawah ini:
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.6em; /* 1.6em = 16px */
}
Tip: Konsorsium World Wide Web (W3C) merekomendasikan penggunaan nilai em atau persentase (%) untuk membuat tata letak yang lebih baik dan terukur.
Font Weight
Properti font-weight menentukan weight atau tebal font.
Nilai yang mungkin dari properti font-style adalah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 dan inherit. Nilai numerik 100-900 menentukan bobot font, di mana setiap angka mewakili bobot yang lebih tebal daripada sebelumnya. 400 sama dengan normal & 700 sama dengan bold. Berikut contohnya:
p {
font-weight: bold;
}
Karena sebagian besar font hanya tersedia dalam jumlah bobot yang terbatas; seringkali mereka hanya tersedia dalam ukuran normal dan bold. Jika ketebalan font yang diinginkan tidak ada, maka alternatif ketebalan yang akan diambil adalah yang mendekati.
Varian Font
Properti font-varian memungkinkan teks untuk ditampilkan dalam variasi huruf kecil.
Huruf kecil atau huruf sedikit kecil berbeda dengan huruf kapital normal, di mana huruf kecil muncul sebagai versi yang lebih kecil dari huruf besar.
Nilai yang mungkin untuk properti varian font adalah normal, small-caps dan inherit.
p {
font-variant: small-caps;
}