ข้อความและฟอนต์

เลือกฟอนต์ด้วย font-family จากนั้นปรับขนาด น้ำหนัก และระยะห่างบรรทัดเพื่อให้ข้อความอ่านสบายตา

9 นาที · 3 คำถาม

ฟอนต์ (font) คือรูปแบบการออกแบบตัวอักษร Arial, Georgia หรือ Times New Roman ล้วนเป็นฟอนต์ ใน CSS คุณสมบัติ font-family เลือกฟอนต์ให้กับข้อความส่วนหนึ่ง คุณกำหนด รายการ (list) ของฟอนต์คั่นด้วยเครื่องหมายจุลภาคให้มัน เบราว์เซอร์จะลองใช้ตัวแรก หากไม่ได้ติดตั้งไว้บนอุปกรณ์ของผู้เข้าชม มันจะข้ามไปยังตัวถัดไป และเป็นเช่นนี้ต่อไป มันคือแผน A แผน B แผน C

body {
  font-family: Georgia, "Times New Roman", serif;
}

คำสุดท้ายในรายการคือ ตระกูลฟอนต์ทั่วไป (generic family) serif หมายถึงฟอนต์ที่มีเชิง (ขีดเล็ก ๆ ที่ปลายตัวอักษร เหมือนในหนังสือพิมพ์ที่ตีพิมพ์) sans-serif หมายถึงฟอนต์ที่ไม่มีเชิง (ดูทันสมัยกว่า เหมือน Arial) และ monospace หมายถึงฟอนต์ความกว้างคงที่ที่ตัวอักษรทุกตัวกว้างเท่ากัน (เหมาะสำหรับโค้ด) สังเกตเครื่องหมายอัญประกาศรอบ "Times New Roman" มันจำเป็นเสมอเมื่อชื่อฟอนต์มีช่องว่าง

ขนาดข้อความกำหนดด้วย font-size คุณรู้จักพิกเซลอยู่แล้ว (16px คือขนาดเริ่มต้นของเบราว์เซอร์) นอกจากนี้ยังมีหน่วย rem 1rem เท่ากับขนาดฐานของหน้า ดังนั้น 1.5rem คือหนึ่งเท่าครึ่งของขนาดนั้น น้ำหนัก (weight) ซึ่งหมายถึงความหนาของเส้นตัวอักษร กำหนดด้วย font-weight normal สำหรับข้อความปกติ bold สำหรับตัวหนา หรือตัวเลขตั้งแต่ 100 (บางมาก) ถึง 900 (หนามาก) โดย 400 เทียบเท่ากับ normal และ 700 เทียบเท่ากับ bold

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

การตั้งค่าสุดท้าย ที่มักถูกมองข้ามแต่จำเป็นต่อการอ่านที่สบายตา คือ line-height หรือ ความสูงบรรทัด มันควบคุมพื้นที่แนวตั้งระหว่างบรรทัดต่าง ๆ ของย่อหน้า หากแคบเกินไป บรรทัดจะรู้สึกอึดอัด หากกว้างเกินไป สายตาก็จะหลงทาง แนวทางที่ดีที่สุดคือใช้ค่าแบบ ไม่มีหน่วย (unitless) ซึ่งจะคูณกับขนาดข้อความ line-height: 1.5; ทำให้แต่ละบรรทัดสูงเป็นหนึ่งเท่าครึ่งของขนาดฟอนต์

p {
  font-size: 16px;
  line-height: 1.5;
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ทำไมคุณจึงกำหนดฟอนต์หลายตัวให้ font-family โดยคั่นด้วยเครื่องหมายจุลภาค?
   • เพื่อผสมฟอนต์ภายในคำเดียว
   • เพื่อให้เบราว์เซอร์ลองตัวถัดไปหากฟอนต์หนึ่งขาดหายไป
   • เพราะไวยากรณ์ CSS กำหนดให้มีอย่างน้อยสามค่า
2. ค่า font-weight ใดที่ตรงกับตัวหนาแบบคลาสสิก (bold)?
   • 100
   • 400
   • 700
   • 900
3. ด้วย font-size: 20px และ line-height: 1.5 แต่ละบรรทัดสูงเท่าใด?
   • 20 พิกเซล
   • 25 พิกเซล
   • 30 พิกเซล
   • 35 พิกเซล