The font-variantproperti memungkinkan Anda untuk mengubah teks yang ditargetkan untuk topi kecil. Properti ini telah diperpanjang di CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Sebelum CSS3, properti ini menerima salah satu dari dua kemungkinan nilai: normal(bagaimana teks dirender secara default) dan small-caps.
Nilai dari small-capsakan membuat teks dalam huruf besar yang lebih kecil dari huruf besar biasa. Ini tidak menimpa himpunan huruf besar dalam konten, di dalam markup. Sebagai contoh:
Dalam demo di atas, kedua paragraf disetel ke font-variant: small-caps. Paragraf pertama hanya memiliki huruf besar pertama di markup, sehingga muncul seperti yang diharapkan (huruf pertama besar, sisanya dalam huruf kecil).
Baris kedua ditulis dalam huruf besar semua dalam markup, yang menggantikan small-capsnilai, mengatur semuanya dalam huruf besar biasa.
Lebih jauh lagi, jika paragraf ini disetel ke font-variant: small-capsdan text-transform: lowercase, maka paragraf tersebut akan muncul dalam huruf besar semua. Demikian pula, jika paragraf ini disetel ke font-variant: small-capsdan text-transform: uppercase, paragraf ini akan muncul dalam semua huruf besar reguler.
font-variantdapat dimasukkan sebagai bagian dari fontdeklarasi singkatan.
Penambahan Baru di CSS3
Dalam CSS3, font-variantmenjadi singkatan dan dapat menerima beberapa nilai, termasuk all-small-caps, petite-caps, all-petite-caps, titling-caps, dan unicase, antara lain.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja |
Nilai baru yang ditambahkan di CSS3 tidak memiliki dukungan browser, jadi tabel di atas mewakili dukungan untuk nilai small-caps.
Di IE6 / 7, pengaturan font-variant: small-capsakan menyebabkan teks apa pun diatur ke text-transform: uppercaseatau text-transform: lowercasemuncul seperti text-transform: none.