แบบอักษร CSS

สารบัญ

    แสดงสารบัญ

การเลือกแบบอักษรที่เหมาะสมสำหรับเว็บไซต์ของคุณเป็นสิ่งสำคัญ!

การเลือกแบบอักษรเป็นสิ่งสำคัญ

การเลือกแบบอักษรที่เหมาะสมมีผลกระทบอย่างมากต่อประสบการณ์ของผู้อ่าน เว็บไซต์.

แบบอักษรที่เหมาะสมสามารถสร้างเอกลักษณ์ที่แข็งแกร่งให้กับแบรนด์ของคุณได้

การใช้แบบอักษรที่อ่านง่ายเป็นสิ่งสำคัญ แบบอักษรจะเพิ่ม คุณค่าให้กับข้อความของคุณ สิ่งสำคัญคือต้องเลือกสีและขนาดข้อความที่ถูกต้อง สำหรับแบบอักษร

ตระกูลฟอนต์ทั่วไป

ใน CSS มีตระกูลฟอนต์ทั่วไปอยู่ห้าตระกูล:

  1. แบบอักษร Serif มีขีดเล็กๆ ที่ขอบของตัวอักษรแต่ละตัว พวกเขาสร้างความรู้สึกเป็นทางการและสง่างาม

  2. แบบอักษร Sans-serif มีเส้นสะอาดตา (ไม่มีเส้นขีดเล็ก ๆ ติดอยู่) สร้างรูปลักษณ์ที่ทันสมัยและเรียบง่าย

  3. แบบอักษร Monospace - ที่นี่ตัวอักษรทั้งหมดมีความกว้างคงที่เท่ากัน พวกมันสร้างรูปลักษณ์แบบกลไก

  4. แบบอักษร ตัวสะกด เลียนแบบลายมือของมนุษย์

  5. แบบอักษร แฟนตาซี เป็นแบบอักษรสำหรับตกแต่ง/สนุกสนาน

ชื่อฟอนต์ที่แตกต่างกันทั้งหมดเป็นของหนึ่งในตระกูลฟอนต์ทั่วไป

ความแตกต่างระหว่างแบบอักษร 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>