วิธีตั้งค่าฟอนต์ข้อความใน HTML (ใช้ CSS แทนแท็ก font)

แท็ก <font> เคยใช้สำหรับตั้งค่าฟอนต์ใน HTML แต่อยู่ในสถานะ Deprecated (ล้าสมัย/ไม่แนะนำ) แล้ว ปัจจุบันควรใช้ CSS แทน ซึ่งยืดหยุ่นและทรงพลังกว่ามาก

วิธีการตั้งค่าฟอนต์ด้วย CSS

ใช้คุณสมบัติ font-family ในสไตล์ inline หรือ CSS class:

<!DOCTYPE html>
<html>
<body>
    <h2>Tutorialspoint</h2>
    <p>วิดีโอการเรียนรู้</p>
    <p style="font-family: 'Courier New', monospace;">เนื้อหาการเรียนรู้</p>
</body>
</html>

คุณสมบัติฟอนต์ CSS ที่สำคัญ

คุณสมบัติ	คำอธิบาย	ตัวอย่าง
font-family	ระบุชื่อฟอนต์ (คั่นด้วยคอมม่าสำรอง)	`'Arial', 'Helvetica', sans-serif`
font-size	ขนาดฟอนต์	`16px`, `1.2rem`, `large`
font-weight	ความหนาของตัวอักษร	`normal`, `bold`, `600`
font-style	สไตล์ตัวอักษร	`normal`, `italic`, `oblique`
line-height	ความสูงบรรทัด	`1.5`, `150%`

แนวทางปฏิบัติที่ดี

ระบุฟอนต์สำรอง (fallback fonts) เสมอ
ใช้หน่วยสัมพัทธ์ (rem, em) เพื่อรองรับการปรับขนาด
โหลด Web Fonts ผ่าน @font-face หรือ Google Fonts