นอกจากพื้นหลังและสีที่ดูดีแล้ว การตั้งค่าแบบอักษรยังเป็นส่วนสำคัญของการออกแบบเว็บไซต์อีกด้วย แบบอักษรที่เหมาะสมจะไม่เพียงแต่ทำให้หน้าสวยงามมากขึ้นเท่านั้น แต่ยังปรับปรุงประสบการณ์ผู้ใช้อีกด้วย CSS มีชุดคุณสมบัติสำหรับการตั้งค่ารูปแบบแบบอักษรของข้อความ เช่น การเปลี่ยนแบบอักษร การควบคุมขนาดและความหนาของแบบอักษร และอื่นๆ
ด้วย การเรียนรู้คุณสมบัติ CSS ข้างต้น เราสามารถตั้งค่าแบบอักษร ขนาด สไตล์ ตัวเอียง ตัวหนา ฯลฯ สำหรับข้อความในรูปแบบ HTML
1. ตระกูลฟอนต์
แอตทริบิวต์ตระกูลแบบอักษรใช้เพื่อตั้งค่าแบบอักษรขององค์ประกอบ แบบอักษรคือ Song, Kai ฯลฯ
ด้วยแอตทริบิวต์ตระกูลฟอนต์ คุณสามารถประกาศหลายฟอนต์พร้อมกันได้ และฟอนต์จะถูกคั่นด้วยเครื่องหมายจุลภาค ตามหลักการเรียกฟอนต์ ฟอนต์แรกจะถูกเรียกก่อน หากไม่พบ ฟอนต์ถัดไปจะถูกเรียกใช้
ตัวอย่าง:
ตัวอย่างเช่น ตั้งค่าแบบอักษรสำหรับข้อความในแท็ก <p> ต่อไปนี้:
<p>การเขียนโปรแกรม dotcpp</p>
คุณสามารถใช้ตัวเลือกแท็กแล้วตั้งค่าในแอตทริบิวต์แบบอักษรตระกูล:
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}เมื่อประกาศแบบอักษร เราควรประกาศแบบอักษรภาษาอังกฤษและแบบอักษรจีนแยกกัน และการประกาศแบบอักษรภาษาอังกฤษควรอยู่ก่อนแบบอักษรจีน เพราะฟอนต์จีนส่วนใหญ่มีตัวอักษรภาษาอังกฤษแต่ก็ไม่ได้สวยงามมากนักในขณะที่ฟอนต์ภาษาอังกฤษไม่มีตัวอักษรจีน ดังนั้นหากเราไม่ต้องการใช้ฟอนต์ภาษาจีนเพื่อแสดงภาษาอังกฤษ เราต้องจำไว้ว่าต้องประกาศฟอนต์ภาษาอังกฤษก่อน ผู้ที่ประกาศก่อนจะถูกเรียกก่อน
แบบอักษรภาษาอังกฤษที่ใช้กันทั่วไป: Arial, Helvetica, Tahoma, Verdana, Lucida Grande, Georgia ฯลฯ
แบบอักษรจีนที่ใช้กันทั่วไป: SimSun, SimHei, Microsoft YaHei, FangSong, KaiTi ฯลฯ
2.รูปแบบตัวอักษร
Font-style กำหนดลักษณะแบบอักษร คุณสามารถตั้งค่าแบบอักษรเป็นตัวเอียง ตัวเอียง หรือแบบอักษรปกติได้ ฟอนต์ตัวเอียงมักจะถูกกำหนดให้เป็นฟอนต์เดี่ยวภายในตระกูลฟอนต์
ค่าแอตทริบิวต์ทั่วไปสำหรับสกุลนี้มีดังนี้:
3.แบบอักษร-น้ำหนัก
แอตทริบิวต์แบบอักษรน้ำหนักจะกำหนดความหนาของแบบอักษรที่ใช้ในข้อความขององค์ประกอบที่แสดง
ค่าคุณสมบัติทั่วไปสำหรับคุณสมบัตินี้มีดังนี้:
4.ขนาดตัวอักษร
แอตทริบิวต์ขนาดตัวอักษรใช้เพื่อกำหนดขนาดของแบบอักษร หน่วยที่ใช้กันทั่วไปคือ px ซึ่งก็คือพิกเซล
px เป็นตัวย่อของ Pixel ซึ่งเป็นหน่วยที่เล็กที่สุดของภาพดิจิทัลหรือกราฟิกที่สามารถแสดงและแสดงบนอุปกรณ์แสดงผลดิจิทัล พิกเซลเป็นหน่วยลอจิคัลพื้นฐานในกราฟิกดิจิทัล และพิกเซลเรียกอีกอย่างว่าองค์ประกอบรูปภาพ
5. แบบอักษร-รูปแบบ
แอ็ตทริบิวต์ชุดแบบอักษรสามารถแปลงตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กในข้อความเป็นตัวพิมพ์ใหญ่ขนาดเล็ก (ตัวอักษรตัวพิมพ์ใหญ่ที่แปลงแล้วจะมีขนาดใกล้เคียงกับตัวอักษรตัวพิมพ์เล็กก่อนการแปลง ดังนั้นจึงเรียกว่าตัวพิมพ์ใหญ่เล็ก) ค่าตัวเลือกสำหรับแอตทริบิวต์รูปแบบแบบอักษรมีดังนี้:
6. แบบอักษร
คุณลักษณะฟอนต์ใช้เพื่อตั้งค่าคุณลักษณะแบบอักษรทั้งหมดในการประกาศครั้งเดียว โดยมีช่องว่างเพื่อแยกแต่ละคุณลักษณะ นั่นคือแอตทริบิวต์คำย่อที่ครอบคลุมของคุณลักษณะข้างต้น
หากเราใช้แอตทริบิวต์ฟอนต์เพื่อตั้งค่าสไตล์ฟอนต์ ลำดับการตั้งค่าคือ: สไตล์ฟอนต์, ตัวแปรฟอนต์, น้ำหนักฟอนต์, ขนาดฟอนต์/ความสูงบรรทัด, ตระกูลฟอนต์ ไม่จำเป็นต้องตั้งค่าใดๆ และคุณสมบัติที่ไม่ได้ตั้งค่าจะใช้ค่าเริ่มต้น