ขนาด น้ำหนัก และรูปแบบแบบอักษร
ควบคุมขนาดข้อความด้วย font-size น้ำหนักด้วย font-weight และรูปแบบด้วย font-style
ขนาด น้ำหนัก และรูปแบบแบบอักษร เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ขนาดตัวอักษร
font-size กำหนดความสูงของรูปอักขระ โดยรับหน่วยความยาวได้ทุกชนิด แนะนำให้ใช้ rem สำหรับการจัดรูปแบบตัวอักษรที่ปรับขนาดได้และเข้าถึงได้
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
ขนาดแบบอักษรด้วยคีย์เวิร์ด
CSS ยังมีขนาดสัมบูรณ์ด้วยคีย์เวิร์ด (xx-small ถึง xx-large) และคีย์เวิร์ดแบบสัมพัทธ์ (smaller, larger) ซึ่งอ้างอิงจากขนาดแบบอักษรขององค์ประกอบแม่
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
น้ำหนักแบบอักษร
font-weight กำหนดความหนาของข้อความ ใช้ค่าตัวเลข (100–900 โดยเพิ่มครั้งละ 100) หรือคีย์เวิร์ด:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
น้ำหนักแบบอักษรกับแบบอักษรแปรผัน
สำหรับแบบอักษรแปรผัน ค่าน้ำหนักจำนวนเต็มใด ๆ (เช่น font-weight: 550) สามารถใช้ได้ และแบบอักษรจะคำนวณค่าระหว่างแกนที่กำหนดไว้ ทำให้ควบคุมการจัดรูปแบบตัวอักษรได้อย่างละเอียด
รูปแบบแบบอักษร
font-style ควบคุมการแสดงผลตัวเอียงและตัวเอียงเฉียง:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
รูปแบบย่อยของแบบอักษร
font-variant เปิดใช้คุณลักษณะด้านการจัดรูปแบบตัวอักษร เช่น ตัวพิมพ์เล็กขนาดเดียวกัน:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
ชวเลขของแบบอักษร
ชวเลข font รวมรูปแบบ รูปแบบย่อย น้ำหนัก ขนาด ความสูงบรรทัด และตระกูลแบบอักษรไว้ด้วยกัน:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
การปรับขนาดแบบอักษรตามหน้าจอ
ใช้ clamp() เพื่อสร้างการจัดรูปแบบตัวอักษรแบบลื่นไหล ซึ่งปรับขนาดอย่างราบรื่นระหว่างค่าต่ำสุดและค่าสูงสุด:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height เพื่อการอ่านที่ง่าย
line-height กำหนดระยะห่างแนวตั้งระหว่างบรรทัด แนะนำให้ใช้ค่าไร้หน่วย (เช่น 1.5) เพราะค่าจะปรับตามขนาดแบบอักษรขององค์ประกอบลูกหลาน
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
ระยะห่างระหว่างตัวอักษรและคำ
letter-spacing เพิ่มช่องว่างระหว่างอักขระ ส่วน word-spacing เพิ่มช่องว่างระหว่างคำ ใช้หน่วย em เพื่อให้ปรับตามขนาดแบบอักษร
<h2 class="heading">Spaced Out Heading Text</h2>
การกำหนดขนาดแบบอักษรที่เข้าถึงได้
อย่ากำหนด font-size เป็น px ให้กับองค์ประกอบ html หรือ body เพราะจะเขียนทับค่าขนาดแบบอักษรที่ผู้ใช้ตั้งไว้ในเบราว์เซอร์ ให้ใช้หน่วย rem โดยอิงจากค่าเริ่มต้นของเบราว์เซอร์แทน
ตรวจสอบอย่างรวดเร็ว
ค่าตัวเลขของ font-weight ค่าใดเทียบเท่ากับคีย์เวิร์ด bold?
สรุป
ใช้ rem สำหรับ font-size เพื่อเคารพการตั้งค่าของผู้ใช้ font-weight รองรับค่า 100–900 หรือคีย์เวิร์ด ชวเลข font รวมคุณสมบัติหลายรายการไว้ด้วยกัน ใช้ clamp() สำหรับการจัดรูปแบบตัวอักษรแบบลื่นไหล และใช้ line-height แบบไร้หน่วยเพื่อให้ระยะห่างสม่ำเสมอ
คำถามที่พบบ่อย
บทเรียน “ขนาด น้ำหนัก และรูปแบบแบบอักษร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ขนาด น้ำหนัก และรูปแบบแบบอักษร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ขนาด น้ำหนัก และรูปแบบแบบอักษร”
ควบคุมขนาดข้อความด้วย font-size น้ำหนักด้วย font-weight และรูปแบบด้วย font-style คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ขนาด น้ำหนัก และรูปแบบแบบอักษร” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ
- ขนาด น้ำหนัก และรูปแบบแบบอักษร
- การจัดแนว การตกแต่ง และระยะห่างข้อความ
- Google Fonts และ @font-face