font-weight เป็น property ใน CSS ที่เอาไว้กำหนดขนาดตัวอักษร ซึ่งเป็น property ที่ถือได้ว่าใช้บ่อยมาก แต่ยังอาจจะไม่เข้าใจความหมายในบางตัว บทความนี้จะมาเจาะลึกถึงการใช้งานและความหมายของมันกันครับ
font-weight ใน CSS คืออะไร และใช้ยังไง
เป็นการกำหนด property ของขนาดตัวอักษร โดยสามารถเรียกใช้ได้ทั้งแบบ External style, Internal style และ Inline style
ใช้แบบ External style
- Separation of Concerns คือ สิ่งนี้เป็นหนึงในทฤษฎีพื้นฐานของการพัฒนา web development คือ การแยกไฟล์ระหว่าง เนื้อหา (HTML) การนำเสนอ (CSS) และ พฤติกรรม (JavaScript) External CSS มีส่วนช่วยในการแยกสไตล์ออกจากเนื้อหา
- Modularity: คุณสามารถสร้างไฟล์ CSS เพิ่งไฟล์เดียวในการเก็บสไตล์ทั้งเว็บไซต์ เพื่อให้ง่ายต่อการจัดการและดูแลสไตล์ของคุณ เพราะเพียงแค่คุณเปลี่ยนในไฟล์นี้ไฟล์เดียว ก็สามารถเปลี่ยนแปลงสไตล์ได้ทั้งเว็บ
- Reusability : คุณสามารถ reuse ไฟล์ CSS เดียวกันนี้ กับไฟล์ HTML หน้าอื่นๆได้
- Browser Caching: เมื่อ user เข้าเยี่ยมชมเว็บไซต์ของคุณ web browser สามารถเก็บ cache ไฟล์ External CSS ไฟล์ได้ นั่นหมายความว่าหลังจากที่เข้าเว็บครั้งแรก การโหลดเว็บไซต์ในครั้งต่อไปจะรวดเร็วขึ้น เนื่องจากไฟล์ CSS ได้ถูกจัดเก็บไว้ในอุปกรณ์ของผู้ใช้งานแล้ว
ตัวอย่างการใช้ External style ของ font-weight
สร้างไฟล์ HTML และทำการเรียกใช้ไฟล์ CSS คือ mystyle.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>ไฟล์ mystyle.css
body {
background-color: lightblue;
}
p {
font-weight: bold;
}การใช้แบบ Internal style
Internal CSS อาจจะนำไปใช้ในกรณีไฟล์นั้นมีการแสดงผลแบบเฉพาะเจาะจง ไม่เหมือนชาวบ้านชาวเมืองเค้า โดยจะถูกกำหนดใน <style> element ในส่วน head section
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>การใช้แบบ Inline style
inline style ใช้เมื่อมีการกำหนดสไตล์แบบเฉพาะเจาะจง ใน element หนึ่งๆ ซึ่งเจาะจงกว่าแบบ internal style ในการใช้ inline style นั้น จะเพิ่ม attribute ชื่อว่า style ลงใน element และเติม CSS property ลงไป
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="font-weight: bold;">This is a paragraph.</p>
</body>
</html>อธิบาย Property ของ font-weight
สามารถกำหนดค่า property ได้ทั้งแบบตัวอักษร และตัวเลข เช่น
font-weight: normal;
font-weight: bold;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;
font-weight: lighter;
font-weight: bolder;
font-weight: inherit;
font-weight: initial;อธิบายค่า property ต่างๆ
normal
ค่าปกติของตัวอักษร มีค่าเท่ากับ 400
bold
ตัวหนา มีค่าเท่ากับ 700
bolder
ตัวหนาขึ้น
lighter
ตัวบางกว่า normal
ตัวเลข
ค่าที่สามารถเลือกค่าความหนาของตัวอักษรได้ตั้งแต่ 1-1000 โดยยิ่งมีค่าเพิ่มเท่าไหร่ ความหนาก็จะมากตาม แต่ค่าที่ accept จะมี แค่ 100, 200, 300, 400, 500, 600, 700, 800, และ 900 เท่านั้น
initial
เป็นการเอาค่ามาจากค่าเริ่มต้น ถ้าเป็น property font-weight คือ normal
inherit
เป็นการนำค่าจาก element parent มาใช้ เช่น font-weight มีค่าเป็น bold ถ้า inherit ก็คือ bold เช่นกัน
ขอบคุณข้อมูลจาก : w3schools.com, developer.mozilla.org
ขั้นตอนการติดตั้ง Vuetify ใน Laravel
3 เทคนิค เพิ่มความเร็วใน Laravel
ฟังก์ชันวันเวลาที่น่าสนใจใน MySQL
เคล็ดลับการเรียงลำดับข้อมูลใน MySQL
เชื่อมตารางตัวเองใน MySQL ด้วย SELF JOIN
เคล็ดลับเพิ่มประสิทธิภาพการใช้ Google Docs
เทคนิคการใช้ ChatGPT Plus ให้คุ้มค่า คุ้มราคา
เชื่อมหลายฐานข้อมูล MySQL ใน Codeigniter4