font CSS
- หน้าก่อน text shadow CSS
- หน้าต่อไป font style CSS
การเลือกแบบอักษรที่ถูกต้องสำหรับเว็บไซต์ของคุณสำคัญ!
การเลือกแบบอักษรสำคัญ
การเลือกแบบอักษรที่ถูกต้องสามารถส่งผลต่อประสบการณ์การใช้งานของผู้ใช้เว็บไซต์ของคุณอย่างมาก
แบบอักษรที่ถูกต้องสามารถสร้างภาพลักษณ์ที่แข็งแกร่งสำหรับแบรนด์ของคุณ
การเลือกแบบอักษรที่ง่ายต่อการอ่านมากมายสำคัญ แบบอักษรที่คุณเลือกทำให้ข้อความของคุณมีค่ามากขึ้น การเลือกสีและขนาดของแบบอักษรที่ถูกต้องก็สำคัญเช่นกัน
ตระกูลแบบอักษรทั่วไป
ใน CSS มีตระกูลแบบอักษรทั่วไปห้าตระกูล
- แบบอักษรที่มีขอบหน้า (Serif) - มีขอบหน้าเล็กบนขอบของแต่ละตัวอักษร ทำให้มีลักษณะที่มีรูปร่างและอรรยะ
- แบบอักษรไม่มีขอบหน้า (Sans-serif) - ชายของแบบอักษรที่เรียบเรียง (ไม่มีขอบหน้าย่อย) ทำให้มีลักษณะที่สมมาตรและเรียบสะอาด
- แบบอักษรกว้าง (Monospace) - ทุกตัวอักษรที่มีความกว้างเท่ากัน และความสูงที่เท่ากัน ทำให้มีลักษณะที่เหมือนกับทั้งหมดที่เครื่องกล
- แบบอักษรหนังสือสะท้อน (Cursive) - จำลองแบบเขียนหนังสือของมนุษย์
- แบบอักษรฝัน (Fantasy) - คือแบบอักษรที่มีลักษณะเครื่องสวยงาม/มีลักษณะหน้าตาดวง
ชื่อแบบอักษรทั้งหมดที่แตกต่างกันนั้นเนื่องมาจากห้าตระกูลแบบอักษรทั่วไปนี้
ความแตกต่างระหว่างแบบอักษร Serif และ Sans-serif
คำแนะนำ:บนหน้าจอคอมพิวเตอร์ แบบอักษรไม่มีขอบหน้า (Sans-serif) ถือว่าง่ายต่อการอ่านมากกว่าแบบอักษรที่มีขอบหน้า (Serif)
ตัวอย่างแบบอักษรบางตัว
| ตระกูลแบบอักษรทั่วไป | ตัวอย่างชื่อแบบอักษร |
|---|---|
| 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 |
font-family ของ CSS
ใน CSS พวกเราใช้ความหมาย font-family ที่จะกำหนดแบบอักษรของข้อความ
属性 font-family ควรมีชื่อแบบอักษรหลายชื่อเป็น 'ระบบรองรับ' เพื่อให้มีความสามารถใช้งานสูงสุดระหว่างเบราเซอร์/ระบบปฏิบัติการต่าง ๆ โปรดเริ่มจากแบบอักษรที่คุณต้องการ และจบด้วยตระกูลแบบอักษรทั่วไป (ถ้าไม่มีแบบอักษรที่สามารถใช้งานได้ ให้เบราเซอร์เลือกแบบอักษรที่คล้ายกันในตระกูลแบบอักษรทั่วไป) ชื่อแบบอักษรควรแยกด้วยคำ逗号
หมายเหตุ:ถ้าชื่อตัวอักษรมีหลายคำ ต้องใช้เครื่องหมายเปิดปิดเพื่อปิดกั้น ตัวอย่าง: "Times New Roman"。
ตัวอย่าง
กำหนดตัวอักษรสำหรับสามย่อหน้า
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
- หน้าก่อน text shadow CSS
- หน้าต่อไป font style CSS
