คุณสมบัติขนาดฟอนต์ CSS กำหนดขนาดฟอนต์ขององค์ประกอบข้อความใดๆ บนหน้าหรือเว็บไซต์ของคุณ คุณสมบัติขนาดฟอนต์สามารถใช้ได้กับคลาส ID หรือองค์ประกอบใดๆ ที่มีเนื้อหาข้อความ คุณสมบัติยอมรับค่าเป็น px, em, rem, vw, vh และใช้คีย์เวิร์ด
นักพัฒนาส่วนใหญ่ใช้ฟอนต์ขนาดต่างๆ ผสมกันเพื่อจัดรูปแบบหน้าเว็บ ตัวอย่างเช่น นักพัฒนาเว็บอาจใช้แบบอักษรขนาดใหญ่สำหรับส่วนหัว และแบบอักษรที่เล็กกว่าสำหรับข้อความเนื้อหาและอื่นๆ หลายคนถาม:คุณจะเปลี่ยนขนาดแบบอักษรใน CSS หรือ HTML ได้อย่างไร
CSS font-size คุณสมบัติช่วยให้นักพัฒนาสามารถกำหนดขนาดแบบอักษรในย่อหน้าหรือบรรทัดข้อความบนหน้าเว็บได้
บทแนะนำนี้จะอธิบายเกี่ยวกับการใช้ font-size คุณสมบัติ. การอ่านคู่มือนี้จะช่วยให้คุณเป็นผู้เชี่ยวชาญในการเปลี่ยนขนาดตัวอักษรได้
CSS font-size
รูปแบบตัวอักษรที่เหมาะสมเป็นส่วนสำคัญของการออกแบบเว็บ ข้อความที่ไม่มีรูปแบบทำให้เกิดปัญหาในการอ่านในหมู่ผู้เข้าชม ซึ่งเกือบจะส่งผลให้ประสบการณ์เว็บไซต์ไม่เป็นที่พอใจอย่างแน่นอน
ฟอนต์ CSS มีสไตล์มากมายที่สามารถใช้ปรับแต่งลักษณะที่ปรากฏของข้อความได้ เช่น ฟอนต์น้ำหนัก ตระกูลฟอนต์ การตกแต่งข้อความ และสี คุณสมบัติที่สำคัญอีกประการหนึ่งคือขนาดฟอนต์ ซึ่งควบคุมขนาดของฟอนต์ในกลุ่มข้อความ
ไวยากรณ์สำหรับ CSS font-size คุณสมบัติคือ:
font-size: sizeValue;
sizeValue คือขนาดแบบอักษรที่คุณต้องการให้บล็อกข้อความใช้ มีหลายวิธีในการระบุขนาดแบบอักษรที่ใช้โดยกลุ่มข้อความ วิธีการที่เราจะพูดถึงในบทความนี้คือ:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
- พิกเซล
- พวกเขา
- root em
- หน่วยวิวพอร์ต
- คำหลัก
ให้เราสำรวจตัวอย่างวิธีการใช้แบบอักษรแต่ละขนาดในหน้าเว็บ
กำหนดขนาดตัวอักษรโดยใช้พิกเซล
วิธีทั่วไปในการกำหนดขนาดของแบบอักษรคือการใช้พิกเซล
พิกเซลเป็นหน่วยวัดที่ดีเพราะช่วยให้คุณมีความแม่นยำ หน่วยพิกเซลส่วนใหญ่ไม่ได้รับผลกระทบจากระบบปฏิบัติการหรือเว็บเบราว์เซอร์ พิกเซลบนหน้าจอหนึ่งเป็นพิกเซลในอีกหน้าจอหนึ่ง ค่าพิกเซลที่คุณระบุจะแสดงคร่าวๆ ในลักษณะเดียวกันในเบราว์เซอร์ต่างๆ
อย่างไรก็ตาม การใช้พิกเซลเพื่อกำหนดขนาดของฟอนต์ในกลุ่มข้อความนั้นมีข้อจำกัดอยู่หนึ่งข้อ นั่นคือ ความสามารถในการเข้าถึง ขนาดแบบอักษรที่กำหนดโดยใช้พิกเซลไม่สามารถเข้าถึงได้เนื่องจากเบราว์เซอร์บางตัวไม่อนุญาตให้ผู้ใช้กำหนดขนาดแบบอักษรเอง ตัวอย่างเช่น ผู้ใช้ที่มีความบกพร่องทางสายตา อาจมีปัญหาในการใช้ไซต์ที่ใช้พิกเซลเพื่อกำหนดขนาดแบบอักษร
สมมติว่าเรากำลังสร้างเว็บไซต์ที่มีขนาดแบบอักษร 28px สำหรับ <h1> . ทั้งหมด องค์ประกอบและ 12px สำหรับ <p> . ทั้งหมด องค์ประกอบ เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
h1 { font-size: 28px; }
p ( font-size: 12px; }
ในโค้ดของเรา เราได้ใช้ตัวเลือก CSS กำหนดขนาดฟอนต์ของ <h1> . ทั้งหมด องค์ประกอบเป็น 28px และ <p> . ทั้งหมด องค์ประกอบเป็น 12px . ตัวอย่างต่อไปนี้แสดงให้เห็นว่าองค์ประกอบเหล่านี้ปรากฏอย่างไรกับขนาดแบบอักษรใหม่ของเรา:
<style>
h1 { font-size: 28px; }
p { font-size: 12px; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
กำหนดขนาดตัวอักษรโดยใช้ ems
อีกวิธีทั่วไปในการตั้งค่าขนาดของฟอนต์ใน CSS คือการใช้ขนาด em หน่วยวัด em หมายถึงขนาดตัวอักษรขององค์ประกอบหลัก หากคุณกำหนดขนาดฟอนต์เป็น 2em ขนาดตัวอักษรจะเป็นสองเท่าขององค์ประกอบหลัก
ตัวอย่าง CSS Font Sizing with ems
ตัวอย่างเช่น สมมติว่าคุณมีย่อหน้าของข้อความที่จัดเก็บไว้ในกล่อง ขนาดตัวอักษรของกล่องคือ 20px . หากคุณระบุขนาดตัวอักษรของย่อหน้าข้อความเป็น 1em ขนาดตัวอักษรของย่อหน้าจะเป็น 20px . ซึ่งเท่ากับขนาดตัวอักษรขององค์ประกอบหลัก
หากคุณไม่ได้กำหนดขนาดแบบอักษรสำหรับองค์ประกอบหลัก เบราว์เซอร์จะใช้ค่าเริ่มต้นที่ระบุสำหรับเบราว์เซอร์นั้น ซึ่งมักจะเป็น 16px . ดังนั้น หากคุณไม่ได้ระบุขนาดตัวอักษร 1em เป็นค่าเริ่มต้น 16px , 2em เป็นค่าเริ่มต้น 32px .
สมมติว่าขนาดตัวอักษรของหน้าเว็บของเราคือ 16px . เราต้องการให้ข้อความทุกย่อหน้าปรากฏขึ้นโดยใช้ขนาดตัวอักษรนั้น ซึ่งหมายความว่าเราควรใช้ค่า 1em . นอกจากนี้ เราต้องการให้ส่วนหัวทั้งหมดของเราปรากฏด้วยขนาดแบบอักษร 24px ซึ่งเท่ากับ 1.5em .
เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
p { font-size: 1em; }
h1 { font-size: 1.5em; }
ในโค้ดของเรา ขนาดของย่อหน้าทั้งหมดจะเป็น 16px (1em =16px โดยค่าเริ่มต้น) และ <h1> . ทั้งหมด องค์ประกอบจะเป็น 24px (1.5em =24px ).
นี่คือลักษณะที่ข้อความของเราจะปรากฏบนหน้าเว็บ:
<style>
p { font-size: 1em; }
h1 { font-size: 1.5em; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
ในตัวอย่างข้างต้น คุณสามารถดูรูปแบบใหม่สำหรับทั้ง <h1> . ของเรา และ <p> องค์ประกอบ
คุณควรสังเกตว่าถ้า <h1> . ของเรา ปรากฏในกล่องที่มีขนาดตัวอักษรอื่น ขนาดของ <h1> . ของเรา จะเปลี่ยน เนื่องจากค่า em จะสืบทอดขนาดแบบอักษรของผู้ปกครอง
กำหนดขนาดตัวอักษรโดยใช้รูท em
ย่อมาจาก root em rem เป็นหน่วยวัดใหม่ที่นำมาใช้ใน CSS3 ที่สามารถใช้กำหนดขนาดแบบอักษรได้ ค่าโดยใช้ rem สัมพันธ์กับรูท <html> องค์ประกอบ แทนที่จะเป็นองค์ประกอบหลัก
rem ค่ามีประโยชน์เพราะช่วยให้คุณสามารถระบุค่าที่สัมพันธ์กับเอกสารทั้งหมดได้ ด้วยวิธีนี้ ขนาดของข้อความของคุณจะไม่ได้รับผลกระทบหากองค์ประกอบหลักมีค่า em ต่างกัน
สมมติว่าเรามีหน้าเว็บที่มีขนาดแบบอักษรเริ่มต้นเป็น 16px . เช่นเดียวกับในตัวอย่างก่อนหน้านี้ เราต้องการ <h1> . ทั้งหมด ให้ปรากฏใน 24px และย่อหน้าทั้งหมดให้ปรากฏใน 16px . เราสามารถกำหนดขนาดแบบอักษรเหล่านี้โดยใช้รหัสต่อไปนี้:
<style>
p { font-size: 1rem; }
h1 { font-size: 1.5rem; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
รหัสของเราเกือบจะเหมือนกับในตัวอย่างก่อนหน้านี้ ข้อแตกต่างเพียงอย่างเดียวคือหน่วยวัดที่เราใช้คือ rem แทน em . ในตัวอย่างนี้ ขนาดแบบอักษรของเรายังคงเป็น 24px และ 16px สำหรับหัวเรื่องและย่อหน้าระดับบนสุดตามลำดับ นั่นเป็นเพราะขนาดตัวอักษรเริ่มต้นของหน้าเว็บของเราคือ 16px .
กำหนดขนาดตัวอักษรโดยใช้คีย์เวิร์ด
มีคีย์เวิร์ดสองประเภทที่คุณสามารถใช้เพื่อกำหนดขนาดฟอนต์ใน CSS
คำหลักแบบสัมบูรณ์ใช้เพื่อกำหนดขนาดแบบอักษรที่ยังคงเหมือนเดิม โดยไม่คำนึงถึงการเปลี่ยนแปลงในหน้าเว็บ คำหลักที่คุณสามารถใช้เพื่อกำหนดขนาดแบบอักษรที่แน่นอนมีดังนี้:
xx-small(9px)x-small(10px)small(13px)medium(16px)large(18px)x-large(24px)xx-large(32px)
ค่าที่ระบุในวงเล็บจะขึ้นอยู่กับเบราว์เซอร์ที่มีขนาดตัวอักษรเริ่มต้นคือ 16px .
คำหลักที่เกี่ยวข้องกัน กำหนดขนาดแบบอักษรที่จะเปลี่ยนแปลงขึ้นอยู่กับขนาดแบบอักษรในส่วนอื่นๆ ของหน้าเว็บ คำหลักที่เกี่ยวข้องกันที่คุณสามารถใช้ได้คือ:เล็กลงและใหญ่ขึ้น คีย์เวิร์ดเหล่านี้มีประโยชน์เพราะช่วยให้คุณเปลี่ยนขนาดฟอนต์ได้เมื่อขนาดฟอนต์อื่นๆ ในหน้าเปลี่ยน
สมมติว่าเราต้องการกำหนดขนาดของ <h2> . ทั้งหมด องค์ประกอบบนหน้าเป็น 24px (x-large) และ <h3> . ทั้งหมด องค์ประกอบเป็น 18px (ใหญ่). เราสามารถทำได้โดยใช้รหัสนี้:
<style>
h2 { font-size: x-large; }
h3 { font-size: large; }
</style>
<html>
<h2>This is a heading.</h2>
<p>This is some paragraph text.</p>
<h3>This is a lower-level heading.</h3>
<p>This is some more paragraph text.</p>
</html>
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
ขนาดตัวอักษรสำหรับ <h2> . ของเรา และ <h3> แท็กคือ 24px และ 18px ตามลำดับ อย่างไรก็ตาม เราไม่ได้ระบุขนาดเหล่านี้โดยใช้พิกเซล แต่เรากลับใช้คีย์เวิร์ดขนาดฟอนต์เริ่มต้นที่เบราว์เซอร์นำเสนอแทน
กำหนดขนาดแบบอักษรโดยใช้หน่วยวิวพอร์ต
หน่วยวิวพอร์ตคำนวณเป็นเปอร์เซ็นต์ของขนาดวิวพอร์ตของเบราว์เซอร์ หน่วยวิวพอร์ตสองหน่วยที่รองรับโดย CSS ได้แก่ ความสูงของการดู (vh ) และดูความกว้าง (vw )
เนื่องจากหน่วยวิวพอร์ตเป็นเปอร์เซ็นต์ของขนาดวิวพอร์ตของเบราว์เซอร์ 1vh เท่ากับ 1% ของความสูงของวิวพอร์ต เป็นต้น ดังนั้น หากคุณมีวิวพอร์ตกว้าง 1,000px 1vh เท่ากับ 10px
การใช้หน่วยวิวพอร์ตมีประโยชน์เนื่องจากขนาดของฟอนต์ของคุณจะเปลี่ยนไปเมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์ ในทางกลับกัน ช่วยให้คุณมอบประสบการณ์ผู้ใช้ที่เข้าถึงได้มากขึ้นโดยปรับให้เข้ากับเบราว์เซอร์และอุปกรณ์ขนาดต่างๆ
สมมติว่าเราต้องการสร้างไซต์ที่มีส่วนหัว 4% ของความกว้างของวิวพอร์ตและมีย่อหน้า 1% ของความกว้างของวิวพอร์ต เราสามารถทำได้โดยใช้รหัสนี้:
<style>
p { font-size: 1vw; }
h1 { font-size: 4vw; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
หากคุณปรับขนาดเบราว์เซอร์ ขนาดของส่วนหัวเหล่านี้จะเปลี่ยนไป
บทสรุป
คุณสมบัติขนาดแบบอักษรใช้ใน CSS (และด้วยเหตุนี้ HTML) เพื่อเปลี่ยนขนาดของแบบอักษร ยอมรับหน่วยวัดจำนวนหนึ่งซึ่งสามารถแสดงขนาดแบบอักษรได้ ซึ่งรวมถึงพิกเซล em rem คำหลัก และหน่วยวิวพอร์ต ใช้ได้กับคลาส CSS และ ID รวมถึงองค์ประกอบด้วย
กวดวิชานี้อธิบายพื้นฐานของขนาดฟอนต์ CSS ตอนนี้คุณพร้อมที่จะเริ่มใช้แอตทริบิวต์ขนาดแบบอักษรอย่างผู้เชี่ยวชาญแล้ว
