CSS Bold: คู่มือการใช้ font-weight เพื่อทำตัวหนา

เพื่อสร้างข้อความตัวหนา (Bold) ด้วย CSS คุณต้องใช้คุณสมบัติ font-weight คุณสมบัตินี้กำหนด "น้ำหนัก" ของฟอนต์ หรือระดับความหนาของข้อความ คุณสามารถใช้คีย์เวิร์ดหรือค่าตัวเลขเพื่อระบุระดับความหนาที่ต้องการ

บทนำ

ในการจัดหน้าเว็บไซต์ บางครั้งเราต้องการดึงดูดสายตาผู้ใช้ไปยังส่วนสำคัญ วิธีพื้นฐานที่สุดคือเพิ่ม font-weight ของข้อความที่ต้องการเน้น บทความนี้จะอธิบายเกี่ยวกับ font-weight วิธีการตั้งค่า และตัวอย่างค่าต่างๆ ที่ใช้ได้

คุณสมบัติ font-weight

คุณสมบัติ font-weight ควบคุมความหนาของข้อความบนหน้าจอ สามารถระบุได้ทั้งคีย์เวิร์ดและค่าตัวเลข ไวยากรณ์พื้นฐานคือ:

font-weight: weightOfFont;

ค่า weightOfFont คือระดับน้ำหนักฟอนต์ที่ต้องการสำหรับองค์ประกอบนั้น

สเกลความหนาของ CSS (CSS Bold Scale)

คุณสามารถนึกถึง font-family ว่ามีสเกลความหนาตั้งแต่ 100 ถึง 1000 ค่าที่สูงกว่าจะทำให้ฟอนต์หนาขึ้น อย่างไรก็ตาม ไม่ใช่ทุก font-family ที่รองรับสเกลทั้งช่วง ควรตรวจสอบฟอนต์ที่ใช้ก่อน

ตัวอย่างโค้ดด้านล่างแสดงระดับความหนาต่างๆ ของฟอนต์ 'Arial' โดยใช้ทั้งตัวเลขและคีย์เวิร์ด:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Font Weight Demo</title> <style> body { font-family: 'Arial'; font-size: 3rem; } span { font-size: 1.5rem; } p:nth-child(1) { font-weight: normal; } p:nth-child(2) { font-weight: bold; } p:nth-child(3) span { font-weight: bolder; } p:nth-child(4) span { font-weight: lighter; } p:nth-child(5) { font-weight: 100; } p:nth-child(6) { font-weight: 200; } p:nth-child(7) { font-weight: 300; } p:nth-child(8) { font-weight: 400; } p:nth-child(9) { font-weight: 500; } p:nth-child(10) { font-weight: 600; } p:nth-child(11) { font-weight: 700; } p:nth-child(12) { font-weight: 800; } p:nth-child(13) { font-weight: 900; } </style> </head> <body> <p>Hello World! <span>-- Normal</span></p> <p>Hello World! <span>-- Bold</span></p> <p>Hello World! <span>-- Bolder <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is bolder than parent </span></p> <p>Hello World! <span>-- Lighter <br> &nbsp; &nbsp; &nbsp; &nbsp; -- child is lighter than parent </span> </p> <p>Hello World! <span>-- 100</span></p> <p>Hello World! <span>-- 200</span></p> <p>Hello World! <span>-- 300</span></p> <p>Hello World! <span>-- 400 'normal'</span></p> <p>Hello World! <span>-- 500</span></p> <p>Hello World! <span>-- 600</span></p> <p>Hello World! <span>-- 700 'bold'</span></p> <p>Hello World! <span>-- 800</span></p> <p>Hello World! <span>-- 900</span></p> </body> </html>

Lighter และ Bolder: ความหมายจริงคืออะไร?

จุดสำคัญคือ lighter และ bolder ไม่ได้หมายถึง "เบากว่าปกติ" หรือ "หนากว่าตัวหนา" โดยตรง แต่หมายถึงระดับน้ำหนักที่สัมพันธ์กับองค์ประกอบพาเรนต์ (parent element) นั่นคือ bolder จะทำให้หนาขึ้นหนึ่งระดับจากพาเรนต์ ส่วน lighter จะทำให้เบาลงหนึ่งระดับ

ตารางระดับน้ำหนักสัมพัทธ์:

ตัวอย่าง: หากพาเรนต์มี font-weight: 400 และลูกใช้ font-weight: bolder ลูกจะมีค่า 700 หากพาเรนต์อยู่ที่ระดับสุดแล้ว (เช่น 900) การใช้ bolder จะไม่มีผล

ตัวอย่างการใช้ font-weight

สมมติเราออกแบบเว็บไซต์ให้ "The Seattle Stamp Club" ต้องการให้หัวข้อ About Us เป็นตัวหนา และข้อความบางส่วนในเนื้อหาให้เป็นตัวหนาเพื่อดึงดูดสายตา

<html> <p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p> <style> span { font-weight: bolder; }

ใน HTML เราใช้ <span> ครอบข้อความที่ต้องการเน้น ใน CSS กำหนดให้ span มี font-weight: bolder ทำให้ข้อความใน span หนาขึ้นจากพาเรนต์ (<p>) ผลลัพธ์คือข้อความ "welcomes all" และ "250 members" จะแสดงเป็นตัวหนา

ตัวหนาด้วย Variable Fonts

Variable Fonts เป็นฟอนต์ใหม่ที่รองรับค่า font-weight ทุกค่าระหว่าง 1 ถึง 1000 (ไม่จำกัดแค่ 100, 200, ...) รองรับในเบราว์เซอร์สมัยใหม่ตั้งแต่พฤษภาคม 2020

สรุป

บทความนี้อธิบายคุณสมบัติ font-weight และผลกระทบต่อความหนาของข้อความ เรียนรู้ว่า bolder และ lighter ทำงานแบบสัมพัทธ์กับพาเรนต์ และเห็นตัวอย่างระดับความหนาต่างๆ ตอนนี้คุณสามารถจัดสไตล์ฟอนต์ด้วย font-weight ได้อย่างมั่นใจแล้ว

อ่านเพิ่มเติม: How to Learn CSS หรือ How to make bold text in HTML หากต้องการทำตัวหนาโดยไม่ใช้ CSS