แบบอักษร CSS
การเลือกแบบอักษรที่เหมาะสมสำหรับเว็บไซต์ของคุณเป็นสิ่งสำคัญ!
การเลือกแบบอักษรเป็นสิ่งสำคัญ
การเลือกแบบอักษรที่เหมาะสมมีผลกระทบอย่างมากต่อประสบการณ์ของผู้อ่านที่มีต่อเว็บไซต์
แบบอักษรที่เหมาะสมสามารถสร้างเอกลักษณ์ที่แข็งแกร่งให้กับแบรนด์ของคุณได้
การใช้แบบอักษรที่อ่านง่ายเป็นสิ่งสำคัญ แบบอักษรเพิ่มคุณค่าให้กับข้อความของคุณ สิ่งสำคัญคือต้องเลือกสีและขนาดตัวอักษรที่ถูกต้องสำหรับแบบอักษร
ครอบครัวแบบอักษรทั่วไป
ใน CSS มีห้าตระกูลฟอนต์ทั่วไป:
- แบบอักษร Serifมีเส้นขีดเล็กๆ ที่ขอบตัวอักษรแต่ละตัว พวกเขาสร้างความรู้สึกของความเป็นทางการและความสง่างาม
- แบบอักษร Sans-serifมีเส้นที่ชัดเจน (ไม่มีการขีดเส้นเล็กๆ แนบ) พวกเขาสร้างรูปลักษณ์ที่ทันสมัยและเรียบง่าย
- แบบอักษรโมโน สเปซ - ในที่นี้ตัวอักษรทั้งหมดมีความกว้างคงที่เท่ากัน พวกเขาสร้างรูปลักษณ์ที่เป็นกลไก
- แบบอักษร เล่นหางเลียนแบบลายมือมนุษย์
- ฟอนต์ แฟนตาซีเป็นฟอนต์สำหรับตกแต่ง/ขี้เล่น
ชื่อแบบอักษรต่างๆ ทั้งหมดเป็นของหนึ่งในตระกูลแบบอักษรทั่วไป
ความแตกต่างระหว่างแบบอักษร Serif และ Sans-serif
หมายเหตุ:บนหน้าจอคอมพิวเตอร์ ฟอนต์ sans-serif ถือว่าอ่านง่ายกว่าฟอนต์ serif
ตัวอย่างแบบอักษรบางส่วน
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
คุณสมบัติตระกูลแบบอักษร CSS
ใน CSS เราใช้font-familyคุณสมบัติเพื่อระบุแบบอักษรของข้อความ
หมายเหตุ : หากชื่อแบบอักษรมีมากกว่าหนึ่งคำ จะต้องอยู่ในเครื่องหมายคำพูด เช่น "Times New Roman"
เคล็ดลับ:คุณสมบัติfont-familyควรมีชื่อแบบอักษรหลายชื่อเป็นระบบ "ทางเลือก" เพื่อให้แน่ใจว่าเบราว์เซอร์/ระบบปฏิบัติการเข้ากันได้สูงสุด เริ่มต้นด้วยฟอนต์ที่คุณต้องการ และลงท้ายด้วยฟอนต์ทั่วไป (เพื่อให้เบราว์เซอร์เลือกฟอนต์ที่คล้ายกันในแฟมิลี่ทั่วไป หากไม่มีฟอนต์อื่นให้เลือก) ชื่อแบบอักษรควรคั่นด้วยเครื่องหมายจุลภาค อ่านเพิ่มเติมเกี่ยวกับฟอนต์สำรองในบทต่อไป
ตัวอย่าง
ระบุแบบอักษรที่แตกต่างกันสำหรับสามย่อหน้า:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}