คุณสมบัติ CSS font-variant สำหรับตัวอักษรตัวเล็ก (Small Caps)

คุณสมบัติ font-variant ใน CSS เป็น shorthand สำหรับคุณสมบัติต่อไปนี้: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, และ font-variant-east-asian มีค่าหลักดังนี้:

font-variant: normal | small-caps | initial | inherit;

ตัวอย่างที่ 1: ใช้ค่า normal (ค่าเริ่มต้น)

<!DOCTYPE html> <html> <head> <style> body {    background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet); } .demo {    text-decoration: overline;    text-decoration-color: yellow;    font-variant: normal; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้ค่า small-caps

<!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline;    text-decoration-color: blue;    font-variant: small-caps; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

ผลลัพธ์

คำอธิบาย

• normal - ตัวอักษรปกติ (ค่าเริ่มต้น)
• small-caps - ตัวพิมพ์เล็กทั้งหมดกลายเป็นตัวพิมพ์ใหญ่ขนาดเล็ก (Small Caps) ตัวพิมพ์ใหญ่เดิมคงขนาดเดิม

คุณสมบัติย่อย (Longhands)

font-variant-caps: small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;
font-variant-numeric: lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions | ordinal | slashed-zero;
font-variant-ligatures: common-ligatures | discretionary-ligatures | historical-ligatures | contextual;
font-variant-east-asian: jis78 | jis83 | jis90 | jis04 | simplified | traditional | full-width | proportional-width;
font-variant-alternates: historical-forms | styleset() | character-variant() | swash() | ornaments() | annotation();

หมายเหตุ: small-caps ทำงานได้ดีกับฟอนต์ที่รองรับ (มี glyph small-caps) มิฉะนั้นเบราว์เซอร์จะจำลองโดยย่อขนาดตัวพิมพ์ใหญ่