Thuộc tính font-variant trong CSS

Thuộc tính font-variant trong CSS là viết tắt cho các thuộc tính: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, và font-variant-east-asian.

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

Ví dụ 1: normal (mặc định)

<!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>Chi tiết kỳ thi</h1>
<p class="demo">Kỳ thi ngày 20 tháng 12.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Ví dụ 2: small-caps (chữ cái nhỏ viết hoa)

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
  text-decoration-color: blue;
  font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Giải thích:

• normal: Văn bản bình thường
• small-caps: Chữ thường hiển thị như chữ hoa nhưng nhỏ hơn (small capitals)
• CSS3 mở rộng font-variant thành shorthand cho nhiều thuộc tính con