CSS font-variant: Biến thể font

Thuộc tính font-variant được dùng để chỉ định font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, và font-variant-east-asian. Đây là shorthand cho các thuộc tính con chi tiết hơn.

Cú pháp

selector {
    font-variant: normal | none | [  ||  ||  ||  || small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] ||  ||  ||  || ordinal || slashed-zero ||  ||  || ruby;
}

Các giá trị chính (font-variant-caps)

Giá trị	Mô tả
`normal`	Mặc định
`small-caps`	Chữ thường hiển thị như chữ hoa nhỏ (small capitals)
`all-small-caps`	Cả chữ hoa và thường → small caps
`petite-caps`	Nhỏ hơn small-caps (nếu font hỗ trợ)
`all-petite-caps`	Tất cả → petite caps
`unicase`	Chữ hoa → small-caps, chữ thường giữ nguyên
`titling-caps`	Chữ hoa thiết kế cho tiêu đề (nếu font hỗ trợ)

Ví dụ 1: small-caps và all-petite-caps trên table

<!DOCTYPE html>
<html>
<head>
<style>
table * {
    box-shadow: inset 0 0 10px lavender;
    font-size: 1.2em;
    font-variant: small-caps;
}
td + td {
    font-variant: all-petite-caps;
}
</style>
</head>
<body>
<table>
    <tr><th>DEMO a</th><th>DEMO b</th></tr>
    <tr><td>1a</td><td>1b</td></tr>
    <tr><td>2a</td><td>2b</td></tr>
</table>
</body>
</html>

Ví dụ 2: unicase

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex; margin: 20px; width: 20%;
    float: left; box-shadow: inset 0 0 9px orange;
    padding: 1rem; font-family: Georgia, serif;
}
#demo { font-variant: unicase; }
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>

Các sub-properties (CSS Fonts Module Level 3/4)

Property	Chức năng	Giá trị mẫu
`font-variant-ligatures`	Kiểm soát ligatures	`common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `historical-ligatures`
`font-variant-caps`	Chữ hoa/thường variant	`small-caps`, `all-small-caps`, `petite-caps`, `unicase`, `titling-caps`
`font-variant-numeric`	Số liệu variant	`lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `slashed-zero`
`font-variant-alternates`	Glyph alternates	`historical-forms`, `stylistic(n)`, `styleset(n)`, `character-variant(n)`, `swash(n)`, `ornaments(n)`, `annotation(n)`
`font-variant-east-asian`	CJK variant	`jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`

Ứng dụng thực tế

/ * Bảng số liệu: tabular-nums (cố định width), lining-nums (đứng thẳng) */
.data-table { font-variant-numeric: tabular-nums lining-nums; }

/ * Tài chính: slashed-zero tránh nhầm 0/O */
.financial { font-variant-numeric: slashed-zero tabular-nums; }

/ * Typography cao cấp: small-caps cho acronym */
.acronym { font-variant-caps: small-caps; letter-spacing: 0.05em; }

/ * Ligatures cho code */
code { font-variant-ligatures: no-common-ligatures; }

Lưu ý

Font phải hỗ trợ các OpenType features tương ứng
Variable fonts thường hỗ trợ đầy đủ các variant này
font-variant: none reset tất cả sub-properties về mặc định
Kế thừa: font-variant được kế thừa