Salah satu jenis variasi dalam font-family adalah small-caps. Dalam huruf kecil-huruf huruf kecil terlihat mirip dengan huruf besar, tetapi dalam ukuran yang lebih kecil dan dengan proporsi yang sedikit berbeda. Properti font-varian memilih font itu.
Dalam CSS2, nilainya bisa mengambil satu dari dua nilai: normal dan huruf kecil. Nilai ‘normal’ memilih font yang bukan huruf kecil, ‘huruf kecil sel memilih huruf kecil. Jika font tidak memiliki variasi huruf kecil, dapat diterima (tapi tidak wajib) jika huruf huruf kecil dibuat dengan mengambil huruf normal dan mengganti huruf kecil dengan karakter huruf besar yang diskalakan. Sebagai upaya terakhir, huruf besar akan digunakan sebagai pengganti huruf kecil.
Hasil variasi font juga dipengaruhi oleh nilai properti text-transform.
Jika nilai properti font-variant di atur ke huruf kecil maka jika nilai properti text-transform diatur ke huruf besar maka semua karakter akan ditampilkan dalam huruf besar normal.
Jika nilai properti font-variant diset ke huruf kecil maka jika nilai properti text-transform diatur ke huruf kecil maka semua karakter akan ditampilkan dalam huruf kecil.
Property font-variant juga menerima nilai inherit, yang memungkinkan elemen mewarisi nilai varian font dari induknya.
Trivia & Catatan
Nilai huruf kecil dari properti font-varian tidak menimpa set huruf besar dalam kode sumber elemen. Jadi, jika, misalnya, Kalian memiliki paragraf yang ditulis dalam huruf kapital semua dalam kode sumber, dan kemudian Kalian mengatur font-variant: small-caps, font akan diterjemahkan sebagai huruf besar biasa dan bukan huruf kecil.
Dalam CSS3, property font-variant telah diperluas — itu menjadi singkatan untuk daftar sub-properti varian font seperti font-varian-ligatures, font-varian-posisi, font-varian-caps, font-varian-numerik , font-varian-alternatif, dan lainnya.
Official Syntax
font-variant: normal | small-caps | inherit
Values:
normal: Memilih font biasa, bukan small-caps
small-caps: Memilih huruf kecil-kecil. Jika font tidak memiliki variasi huruf kecil, beberapa browser akan mensimulasikan huruf huruf kecil dengan mengambil huruf normal dan mengganti huruf kecil dengan karakter huruf besar yang diskalakan.
inherit: Nilai property font-variant diwarisi dari nilai property font-variant sebelumnya (pewarisan)
Contoh
p { font-family: "Verdana", sans-serif; font-variant: small-caps; } h2 { font-variant: inherit; }