ในการสร้างเอฟเฟกต์ข้อความตัวหนา CSS คุณต้องใช้คุณสมบัติ font-weight คุณสมบัติ font-weight จะกำหนด "น้ำหนัก" ของฟอนต์ หรือฟอนต์นั้นจะแสดงตัวหนาเพียงใด คุณสามารถใช้คีย์เวิร์ดหรือค่าตัวเลขเพื่อบอกให้ CSS รู้ว่าข้อความควรเป็นตัวหนาแค่ไหน
ในฐานะนักพัฒนา ในการจัดวางเว็บไซต์ บางครั้งเราต้องการดึงความสนใจไปที่บางสิ่ง มีหลายวิธีที่เราสามารถทำได้ วิธีพื้นฐานที่สุดคือการเพิ่ม font-weight ของข้อความที่คุณต้องการเน้น หมายถึงการทำให้ข้อความปรากฏเป็นตัวหนา
ในบทความนี้ เราจะพูดถึง font-weight วิธีการตั้งค่า และแสดงภาพประกอบของค่าต่างๆ ที่เป็นไปได้สำหรับพร็อพเพอร์ตี้
CSS ตัวหนา:คำแนะนำ
คุณสมบัติ font-weight กำหนดว่าข้อความตัวหนาควรปรากฏบนหน้าจออย่างไร คุณสามารถใช้คีย์เวิร์ดหรือค่าตัวเลขเพื่อสั่ง CSS ว่าชุดข้อความบางชุดควรปรากฏเป็นตัวหนาเพียงใด
ไวยากรณ์ของคุณสมบัติ CSS font-weight มีดังนี้:
font-weight: weightOfFont;
ค่าของ weightOfFont คือน้ำหนักของฟอนต์ที่คุณต้องการใช้สำหรับองค์ประกอบที่มีการนำสไตล์ไปใช้
คุณสมบัติ font-weight ยอมรับค่าที่แตกต่างกันสองสามค่า ขึ้นอยู่กับ font-weight ที่คุณต้องการตั้งค่าสำหรับองค์ประกอบเฉพาะ
CSS Bold Scale
คิดว่าตระกูลแบบอักษรของคุณมีมาตราส่วนตั้งแต่ 100-1,000 ในระดับความกล้า ยิ่งตัวเลขสูง ฟอนต์ก็จะยิ่งเข้มขึ้นเท่านั้น
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
ทำวิจัยเกี่ยวกับตระกูลฟอนต์ที่คุณต้องการ วิธีนี้จะช่วยให้คุณมั่นใจได้ว่าผลลัพธ์จะเบาหรือหนาเท่าที่คุณต้องการบนไซต์ของคุณ ฟอนต์แฟมิลีบางตัวไม่ได้ใช้ขนาดทั้งหมด
โค้ดต่อไปนี้แสดงให้เห็นว่าฟอนต์ยอดนิยมที่เรียกว่า 'Arial' สามารถรับความสว่างและความมืดเพียงใด โดยใช้ทั้งตัวเลขและคีย์เวิร์ด:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</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>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- 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> เบากว่าและโดดเด่นกว่า:จริงๆ แล้วหมายความว่าอย่างไร?
สิ่งสำคัญที่ต้องชี้ให้เห็นในที่นี้คือความเบาและชัดเจนยิ่งขึ้นไม่ใช่การแปลตามตัวอักษร โดดเด่นกว่านี้ไม่ได้หมายความว่า “โดดเด่นกว่าตัวหนา”
ที่จริงแล้วโดดเด่นกว่าและสว่างกว่าในบริบทนี้ ความชัดเจนหรือความสว่างที่สัมพันธ์กับองค์ประกอบหลักในบริบทนี้ ดังนั้นเมื่อเราสร้างองค์ประกอบลูกให้โดดเด่นยิ่งขึ้น องค์ประกอบเหล่านั้นจะมีน้ำหนักแบบอักษรสัมพันธ์ที่เข้มกว่าองค์ประกอบหลัก - เบากว่าเช่นเดียวกัน
น้ำหนักแบบอักษรสัมพัทธ์มีดังนี้:
| น้ำหนักแบบอักษรสัมพัทธ์ | ฟอนต์-น้ำหนักจริง |
| ผอม | 100 |
| ปกติ | 400 |
| ตัวหนา | 700 |
| หนัก | 900 |
ดังนั้น เราจึงสามารถใช้คุณสมบัติ font-weight:bold เพื่อตั้งค่า font-weight ของย่อหน้าของข้อความเป็น 800 เมื่อเด็กมีน้ำหนักสัมพัทธ์ที่ชัดเจนกว่าค่าพาเรนต์ มันจะใช้ตารางด้านบนเพื่อค้นหาว่าจะทำตัวหนาได้อย่างไร มัน.
ตัวอย่างเช่น สมมติว่าฉันมีลูกที่มีผู้ปกครองที่มีน้ำหนักแบบอักษร 400 ถ้าฉันตั้งค่าน้ำหนักแบบอักษรให้กับเด็กให้ชัดเจนยิ่งขึ้น น้ำหนักแบบอักษรของเด็กจะกลายเป็น 700
นี่เป็นเพราะว่าเด็กมีน้ำหนักแบบอักษรสัมพันธ์ที่เข้มกว่าพาเรนต์ หากพาเรนต์มืดหรือสว่างที่สุดเท่าที่จะทำได้ ค่าคุณสมบัติเหล่านั้นจะไม่ทำอะไรเลย
ตัวอย่าง CSS Font Weight
สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับ The Seattle Stamp Club ซึ่งเป็นสมาคมแสตมป์ในท้องถิ่น สมาคมแสตมป์ขอให้เราทำ เกี่ยวกับเรา ไปที่ เกี่ยวกับ หน้าของเว็บไซต์จะปรากฏเป็นตัวหนา สิ่งนี้จะดึงความสนใจของผู้เข้าชมไปที่หัวข้อ
สโมสรแสตมป์ขอให้เราเพิ่มบล็อกข้อความในเว็บไซต์ของพวกเขาพร้อมประวัติของสโมสร บล็อกข้อความนี้ควรปรากฏในน้ำหนักแบบอักษรปกติ วลีบางวลีที่สโมสรต้องการดึงดูดความสนใจของผู้ชมควรปรากฏเป็นตัวหนา
เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างกลุ่มข้อความนี้ โดยมีบางวลีที่เป็นตัวหนา:
<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/CSS
ในไฟล์ HTML ของเรา เราได้กำหนดย่อหน้าของข้อความที่อยู่ภายในแท็ก
นอกจากนี้เรายังได้ใส่บางวลีไว้ในแท็ก ซึ่งเราจะเน้นย้ำในโค้ด CSS ของเรา
ขั้นต่อไป ในไฟล์ CSS ของเรา เราได้กำหนดกฎของรูปแบบที่ตั้งค่าน้ำหนักรูปแบบตัวอักษรของทุกแท็ก ให้ โดดเด่นกว่า . ซึ่งหมายความว่าข้อความที่อยู่ภายในแท็ก จะปรากฏเด่นชัดกว่าองค์ประกอบหลัก
เมื่อเราเรียกใช้โค้ดของเรา ย่อหน้าของเราจะปรากฏโดยมีน้ำหนักแบบอักษรปกติ และวลีที่อยู่ในแท็ก จะปรากฏเป็นตัวหนา ในตัวอย่างนี้ วลี ยินดีต้อนรับทุกคน และ สมาชิก 250 คน อยู่ในแท็ก
CSS ข้อความตัวหนาพร้อมฟอนต์ตัวแปร
มีแบบอักษรที่ใหม่กว่าบางแบบที่เราสามารถใช้ได้ผ่านแบบอักษร CSS ระดับล่าสุด พวกมันถูกเรียกว่าฟอนต์แบบแปรผันและสามารถใส่ อะไรก็ได้ ตัวเลขระหว่าง 1 ถึง 1,000 เป็นฟอนต์-น้ำหนัก การสนับสนุนเบราว์เซอร์ยังไม่ได้รับการใช้งานอย่างสมบูรณ์จนถึงเดือนพฤษภาคม 2020 ดังนั้นจึงค่อนข้างใหม่ หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับฟอนต์แบบแปรผัน โปรดดูบทนำนี้
บทสรุป
ในบทช่วยสอนนี้ เราได้พูดถึงคุณสมบัติ CSS font-weight และผลกระทบที่มีต่อฟอนต์ของเราที่หนา
เราได้เรียนรู้ว่าตัวหนาขึ้นและสว่างขึ้นหมายถึงน้ำหนักแบบอักษรสัมพันธ์หนึ่งค่าห่างจากน้ำหนักแบบอักษรขององค์ประกอบหลัก ในทางปฏิบัติ เราเห็นช่วงของน้ำหนักแบบอักษรเพื่อดูว่าข้อความมีลักษณะอย่างไร คุณจะเป็นผู้เชี่ยวชาญในการออกแบบฟอนต์ด้วยน้ำหนักฟอนต์ในเวลาไม่นาน!
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ดใน CSS โปรดอ่านคำแนะนำเกี่ยวกับวิธีการเรียนรู้ CSS คุณสามารถอ่านคำแนะนำของเราในการสร้างข้อความตัวหนาใน HTML หากคุณต้องการทำให้ข้อความเป็นตัวหนาโดยไม่ต้องพึ่ง CSS
