Cách hiển thị font chữ in hoa nhỏ (small-caps) với JavaScript

Thuộc tính fontVariant (CSS font-variant) cho phép hiển thị chữ thường dưới dạng chữ in hoa nhỏ (small-caps). Giá trị small-caps biến chữ thường thành chữ in hoa nhưng với kích thước nhỏ hơn chữ in hoa thật.

Ví dụ minh họa

Nhấn nút để áp dụng small-caps cho đoạn văn:

<!DOCTYPE html>
<html>
<body>
  <h1>Tiêu đề 1</h1>
  <p id="myID">
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
  </p>
  <button type="button" onclick="display()">Đặt Font Family và Font Variant</button>
  <script>
    function display() {
      document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
      document.getElementById("myID").style.fontVariant = "small-caps";
    }
  </script>
</body>
</html>

Các giá trị fontVariant (CSS3+)

• normal – Mặc định
• small-caps – Chữ in hoa nhỏ
• all-small-caps – Cả chữ in hoa và thường đều thành small-caps
• petite-caps, all-petite-caps – Petite caps (nhỏ hơn small-caps)
• unicase – Hỗn hợp chữ hoa/thường đặc biệt
• titling-caps – Chữ hoa cho tiêu đề

Lưu ý: Font phải hỗ trợ tính năng OpenType smcp hoặc c2sc.