Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีรักษาความอ่านง่ายของข้อความเมื่อ Font Fallback เกิดขึ้นด้วย JavaScript

ใช้คุณสมบัติ fontSizeAdjust เพื่อรักษาอัตราส่วนความสูงของตัวอักษรพิมพ์เล็ก (x-height) เมื่อฟอนต์สำรอง (fallback) ถูกใช้งาน ทำให้ข้อความอ่านง่ายต่อเนื่อง

ตัวอย่าง

<!DOCTYPE html>
<html>
  <body>
    <h1>Heading 1</h1>
    <p id="myID">This is Demo Text.</p>
    <button type="button" onclick="display()">Set Aspect Value</button>
    <script>
      function display() {
        document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
        document.getElementById("myP").style.fontSizeAdjust = "0.90";
      }
    </script>
  </body>
</html>

หมายเหตุ: ตัวอย่างมี bug เล็กน้อย (myP ไม่มีอยู่) ควรเป็น myID