Properti font-variantini membolehkan anda menukar teks yang disasarkan menjadi huruf kecil. Harta tanah ini telah diperluaskan di CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Sebelum CSS3, harta ini menerima salah satu daripada dua nilai yang mungkin: normal(bagaimana teks diberikan secara lalai) dan small-caps.
Nilai small-capsakan menjadikan teks dengan huruf besar yang lebih kecil daripada huruf besar biasa. Ini tidak mengatasi set huruf besar dalam kandungan, di dalam markup. Sebagai contoh:
Dalam demo di atas, kedua-dua perenggan ditetapkan ke font-variant: small-caps. Perenggan pertama hanya memiliki huruf besar huruf besar di markup, sehingga muncul seperti yang diharapkan (huruf besar huruf besar, sisanya dalam huruf kecil).
Baris kedua ditulis dalam semua huruf besar dalam markup, yang mengatasi small-capsnilainya, menetapkan semuanya dalam huruf besar biasa.
Lebih jauh lagi, jika perenggan ini diset ke font-variant: small-capsdan text-transform: lowercase, maka akan muncul dalam semua huruf kecil. Begitu juga, jika perenggan ini diatur ke font-variant: small-capsdan text-transform: uppercase, maka ia akan muncul di semua huruf besar biasa.
font-variantboleh dimasukkan sebagai sebahagian daripada fontdeklarasi singkatan.
Penambahan Baru dalam CSS3
Dalam CSS3, font-variantmenjadi trengkas dan boleh menerima pelbagai nilai, termasuk all-small-caps, petite-caps, all-petite-caps, titling-caps, dan unicase, antara lain.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi |
Nilai baru yang ditambahkan dalam CSS3 tidak mempunyai sokongan penyemak imbas, jadi jadual di atas menunjukkan sokongan untuk nilai small-caps.
Dalam IE6 / 7, tetapan font-variant: small-capsakan menyebabkan set teks menjadi text-transform: uppercaseatau text-transform: lowercasekelihatan seperti text-transform: none.