แท็ก HTML <font>: ล้าสมัยแล้ว ใช้ CSS แทน

แอตทริบิวต์ของ <font> (ล้าสมัย)

ตัวอย่าง (โค้ดเก่า - ไม่ควรใช้)

<!DOCTYPE html>
<html>
<body>
  <h2>เล่นกับฟอนต์</h2>
  <p><font face="arial" size="20" color="yellow">Demo Text!</font></p>
  <p><font size="10" color="gray">Demo Text!</font></p>
  <p><font size="15" face="verdana" color="magenta">Demo Text!</font></p>
  <p><font size="8" face="calibri" color="magenta">Demo Text!</font></p>
</body>
</html>

วิธีที่ถูกต้องใน HTML5: ใช้ CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo-text {
      font-family: 'Calibri', 'Verdana', Arial, sans-serif;
      font-size: 1.2rem;
      color: magenta;
    }
    .text-large { font-size: 2rem; color: orange; }
    .text-small { font-size: 0.875rem; color: gray; }
  </style>
</head>
<body>
  <h2>เล่นกับฟอนต์ (CSS)</h2>
  <p class="demo-text">Demo Text!</p>
  <p class="text-large">ข้อความใหญ่ สีส้ม</p>
  <p class="text-small">ข้อความเล็ก สีเทา</p>
</body>
</html>

ทำไมต้องเลิกใช้ <font>?

• ผสมผสาน Content (HTML) และ Presentation (Style) → บำรุงรักษายาก
• ไม่รองรับ Responsive Design, Media Queries
• ไม่สามารถ Override/Get Computed Style ได้ง่าย
• Accessibility: Screen Reader ไม่ได้รับข้อมูลโครงสร้าง
• SEO: ความหมายทางความหมาย (Semantics) หายไป
• Deprecated ใน HTML5, ลบออกจากมาตรฐาน

แท็กจัดรูปแบบเก่าอื่นๆ ที่ล้าสมัย

สรุป

ใช้ **Semantic HTML** (<strong>, <em>, <mark>, <cite>) ร่วมกับ **CSS** สำหรับการจัดรูปแบบทั้งหมด