คุณสมบัติ font-size กำหนดขนาดข้อความบนเว็บเพจ ใช้กับ class, ID, หรือ元素ที่มีข้อความ รับค่า px, em, rem, vw, vh, keywords
CSS Font-Size
การจัดรูปแบบขนาดฟอนต์สำคัญต่อการออกแบบเว็บ ข้อความไม่มีสไตล์ ทำให้อ่านยาก ประสบการณ์ไม่ดี
ไวยากรณ์: font-size: sizeValue;
วิธีระบุขนาด (ครอบคลุมในบทความ):
- Pixels (px)
- Ems (em)
- Root ems (rem)
- Viewport units (vw, vh)
- Keywords
1. Pixels (px) — ความแม่นยำ แต่เข้าถึงยาก (accessibility)
h1 { font-size: 28px; } p { font-size: 12px; }
ข้อดี: แม่นยำ ค่อนข้าง consistent ข้ามเบราว์เซอร์ ข้อเสีย: บางเบราว์เซอร์ไม่ให้ผู้ใช้ปรับขนาด — ผู้บกพร่องทางสายตาอาจอ่านยาก
2. Ems (em) — สัมพัทธ์กับ parent element
1em = ขนาดฟอนต์ของ parent ถ้า parent 20px → 1em = 20px, 2em = 40px
ไม่ตั้งค่า parent → ใช้ค่า default เบราว์เซอร์ (มัก 16px) → 1em = 16px, 1.5em = 24px
p { font-size: 1em; } h1 { font-size: 1.5em; }
ข้อควรระวัง: em สืบทอดจาก parent — หาก <h1> อยู่ในกล่องที่มี font-size อื่น ขนาดจะเปลี่ยน
3. Root Ems (rem) — สัมพัทธ์กับ root <html>
rem (CSS3) อิง <html> root element แทน parent — ขนาดข้อความไม่ได้รับผลกระทบจาก parent
p { font-size: 1rem; } h1 { font-size: 1.5rem; }
ค่าเริ่มต้น 16px → 1rem = 16px, 1.5rem = 24px
4. Keywords — คำสำรอง
Absolute keywords (คงที่): xx-small(9px), x-small(10px), small(13px), medium(16px), large(18px), x-large(24px), xx-large(32px) — 基于 16px default
Relative keywords (เปลี่ยนตาม context): smaller, larger
h2 { font-size: x-large; } h3 { font-size: large; }
5. Viewport Units (vw, vh) — ตอบสนองขนาดจอ
1vw = 1% viewport width, 1vh = 1% viewport height
ข้อดี: ขนาดฟอนต์เปลี่ยนตามขนาดหน้าต่างเบราว์เซอร์ — accessible และ responsive
p { font-size: 1vw; } h1 { font-size: 4vw; }
สรุป
font-size รองรับหน่วยหลากหลาย: px (แม่นยำ), em (relative to parent), rem (relative to root), keywords (absolute/relative), vw/vh (viewport) — ใช้ผสมผสานได้ เลือกตามความต้องการ accessibility และ responsive design
