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
command line ตรวจสอบ spec ใน Windows OS
วิธีผูก วินิจฉัย (Diagnosis) กับ วัคซีน (Vaccine)
ETL ใน Data Engineering คืออะไร?
แก้ปัญหา export ภาษาไทยเพี้ยน ของ MySQL ใน phpMyAdmin
เชื่อมตารางตัวเองใน MySQL ด้วย SELF JOIN
เคล็ดลับเพิ่มประสิทธิภาพการใช้ Google Docs
เทคนิคการใช้ ChatGPT Plus ให้คุ้มค่า คุ้มราคา
เชื่อมหลายฐานข้อมูล MySQL ใน Codeigniter4