CSS
Typography & Colors
font-family
เรียนรู้การเลือกฟอนต์ด้วย font-family, fallback list, generic family และการใช้ Google Fonts ผ่าน <link> tag เพื่อเพิ่มฟอนต์จากอินเทอร์เน็ตให้หน้าเว็บ
1. font-family คืออะไร
font-family คือ CSS property ที่บอก browser ว่า element นี้ควรใช้ฟอนต์อะไรแสดงข้อความ ฟอนต์มีผลทั้งความอ่านง่ายและอารมณ์ของหน้าเว็บ ฟอนต์แบบ serif ให้ความรู้สึกจริงจังและเหมาะกับบทความยาว ส่วน sans-serif ดูสะอาดและเหมาะกับ UI ทั่วไป ส่วน monospace เหมาะกับโค้ดเพราะตัวอักษรทุกตัวกว้างเท่ากัน
- font-family ใช้กับ element ที่มีข้อความ เช่น h1, p, a, button
- browser ใช้ฟอนต์แรกในรายการที่เครื่องผู้ใช้มีจริง
- ถ้าชื่อฟอนต์มีช่องว่าง ต้องใส่เครื่องหมายคำพูด
- ควรลงท้ายด้วย generic family เช่น serif, sans-serif หรือ monospace
2. Mental model: รายชื่อฟอนต์สำรอง
ลองนึกว่า font-family คือรายชื่อคนที่เราโทรหาเพื่อขอความช่วยเหลือ Browser จะโทรหาคนแรกก่อน ถ้าไม่รับจึงโทรหาคนถัดไป ฟอนต์ก็ทำแบบเดียวกัน ถ้าเครื่องผู้ใช้ไม่มี Georgia browser จะลอง Times New Roman ถ้าไม่มีอีกจึงใช้ serif ซึ่งเป็นกลุ่มฟอนต์สำรองที่มีในทุกระบบ
browser อ่านจากซ้ายไปขวาและหยุดที่ฟอนต์แรกที่ใช้ได้
.article-title {
font-family: Georgia, "Times New Roman", serif;
}3. Generic family ที่ควรรู้
| Generic family | ลักษณะ | เหมาะกับ |
|---|---|---|
| serif | มีเชิงเล็ก ๆ ที่ปลายตัวอักษร | บทความยาว หัวข้อที่อยากให้ดูคลาสสิก |
| sans-serif | ไม่มีเชิง เส้นสะอาด | UI, เมนู, ปุ่ม, ข้อความทั่วไปบนจอ |
| monospace | ตัวอักษรทุกตัวกว้างเท่ากัน | โค้ด ตัวเลข หรือข้อมูลเทคนิค |
- 1. เลือกฟอนต์หลักที่อยากได้
- 2. เพิ่มฟอนต์สำรองที่ให้บุคลิกใกล้กัน
- 3. ลงท้ายด้วย generic family เพื่อให้มีตัวเลือกสุดท้ายเสมอ
4. ตัวอย่างลองเล่น
5. Google Fonts: ฟอนต์จากอินเทอร์เน็ต
Google Fonts คือบริการฟอนต์ฟรีจาก Google ที่ใช้งานได้บนเว็บโดยไม่ต้องติดตั้ง ทำงานผ่าน <link> tag ที่วางใน <head> ของ HTML — browser จะดาวน์โหลดฟอนต์จากเซิร์ฟเวอร์ Google ให้อัตโนมัติทุกครั้งที่มีคนเปิดหน้าเว็บ ข้อดีคือได้ฟอนต์สวยงามโดยไม่ต้องกังวลว่าเครื่องผู้ใช้จะมีหรือไม่มีฟอนต์นั้น
- 1. ไปที่ fonts.google.com
- 2. ค้นหาฟอนต์ที่ต้องการ เช่น "Sarabun", "Kanit" หรือ "Roboto"
- 3. คลิกฟอนต์ที่ชอบเพื่อเข้าหน้ารายละเอียด
- 4. กดปุ่ม "Get font" แล้วกด "Get embed code"
- 5. เลือก tab "<link>" แล้วคัดลอกโค้ด <link> ทั้งหมด
- 6. วางโค้ด <link> ใน <head> ของ HTML ก่อนใช้ในส่วน CSS
6. วิธีใช้ Google Fonts ในโปรเจกต์
Google จะส่งฟอนต์มาให้ browser โหลดอัตโนมัติ — preconnect ช่วยให้โหลดเร็วขึ้น
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">ใส่ชื่อฟอนต์ในเครื่องหมายคำพูด แล้วตามด้วย generic family เป็น fallback
body {
font-family: "Sarabun", sans-serif;
}7. Recap
- font-family เลือกฟอนต์ให้ข้อความ
- fallback list ช่วยให้หน้าเว็บยังอ่านได้แม้เครื่องผู้ใช้ไม่มีฟอนต์หลัก
- ชื่อฟอนต์ที่มีช่องว่างต้องใส่เครื่องหมายคำพูด
- generic family คือ safety net ท้ายสุดของรายการฟอนต์
- Google Fonts ให้ใช้ฟอนต์ฟรีบนเว็บผ่าน <link> tag โดยไม่ต้องติดตั้งบนเครื่อง
Lab 1: กำหนดฟอนต์หลักให้หัวข้อ
เป้าหมาย: ใช้ font-family กับ selector ที่มีอยู่แล้ว โจทย์: 1. เขียน rule สำหรับ .heading 2. กำหนด font-family เป็น Georgia, serif
Lab 2: เขียน fallback list
เป้าหมาย: เขียนรายชื่อฟอนต์สำรองและลงท้ายด้วย generic family โจทย์: 1. กำหนด font-family ให้ .body-text 2. ใช้ Arial, Helvetica, sans-serif ตามลำดับ
Lab 3: ฟอนต์ชื่อมีช่องว่าง
เป้าหมาย: ใช้เครื่องหมายคำพูดกับชื่อฟอนต์ที่มีช่องว่าง โจทย์: 1. กำหนด font-family ให้ .quote 2. ใช้ "Times New Roman", Georgia, serif
Lab 4: นำ Google Font มาใช้ในหน้าเว็บ
เป้าหมาย: ใช้ Google Font ที่ถูก import ไว้แล้วใน HTML โจทย์: 1. HTML มี <link> ของ Kanit จาก Google Fonts อยู่แล้ว 2. กำหนด font-family ให้ .heading ใช้ "Kanit" พร้อม generic family สำรอง