Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thiết lập khoảng cách giữa các ký tự (letter-spacing) với JavaScript

Thuộc tính letterSpacing (CSS letter-spacing) tăng hoặc giảm khoảng cách giữa các ký tự. Giá trị: độ dài (px, em, rem), có thể âm để chật chữ.

Ví dụ minh họa

Nhấn nút để giãn cách ký tự 7px:

<!DOCTYPE html>
<html>
<body>
  <h1>Tiêu đề 1</h1>
  <p id="myID">Đây là văn bản demo.</p>
  <button type="button" onclick="display()">Đặt khoảng cách ký tự</button>
  <script>
    function display() {
      document.getElementById("myID").style.letterSpacing = "7px";
    }
  </script>
</body>
</html>

Ứng dụng thực tế

  • Typography heading: letter-spacing: 0.05em cho tiêu đề to, sang trọng.
  • Button/label nhỏ: letter-spacing: 0.5px dễ đọc hơn.
  • Mã code/serial: letter-spacing: 1px phân tách rõ.
  • Âm: letter-spacing: -0.02em cho font lớn tránh quá rộng.

Lưu ý: Không dùng cho tiếng Việt có dấu ghép phức tạp nếu không test kỹ – có thể làm vỡ chữ.