Cách thiết lập fontStyle, fontVariant, fontWeight, fontSize, lineHeight và fontFamily trong một khai báo với JavaScript

Để thiết lập tất cả các thuộc tính font cùng một lúc, hãy sử dụng thuộc tính font của JavaScript. Đây là cách viết tắt (shorthand) cho phép bạn định nghĩa font-style, font-variant, font-weight, font-size, line-height và font-family trong một dòng mã duy nhất.

Ví dụ minh họa

Chạy mã sau để xem cách thiết lập nhiều thuộc tính font trong một khai báo:

<!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()">Thiết lập Font</button>
  <script>
    function display() {
      document.getElementById("myID").style.font = "italic 15px verdana,sans-serif";
    }
  </script>
</body>
</html>

Giải thích cú pháp

Giá trị "italic 15px verdana,sans-serif" bao gồm:

• italic – font-style
• 15px – font-size
• verdana,sans-serif – font-family

Bạn có thể thêm font-weight (ví dụ: bold), font-variant (ví dụ: small-caps) và line-height (ví dụ: /1.5) theo thứ tự: font-style font-variant font-weight font-size/line-height font-family.