CSS เล่นบทบาทสำคัญในการจัดสไตล์ฟอนต์ คุณสมบัติฟอนต์ CSS อนุญาตให้เราเปลี่ยน font-family, font-size, font-weight, font-kerning และคุณสมบัติอื่นๆ อีกมากมาย คุณสมบัติ CSS font เป็น shorthand สำหรับ font-style, font-variant, font-weight, font-size/line-height และ font-family เพิ่มเติม เราสามารถนำสไตล์ไปใช้กับข้อความผ่าน text-decoration โดยใช้ CSS text-shadow, text-stroke, text-fill-color, color ฯลฯ
color
คุณสมบัตินี้ใช้เปลี่ยนสีของข้อความ
font-family
คุณสมบัตินี้ใช้ตั้งค่าแบบอักษรสำหรับองค์ประกอบ
font-kerning
เพื่อทำให้ระยะห่างตัวอักษรสม่ำเสมอและเพิ่มความอ่านง่าย font-kerning property ถูกใช้ อย่างไรก็ตาม คุณสมบัตินี้ขึ้นอยู่กับฟอนต์เฉพาะ
font-size
คุณสมบัติ font-size ตั้งค่าขนาดของฟอนต์
font-stretch
บางฟอนต์มีหน้าตาเพิ่มเติม เช่น condensed, bold ฯลฯ font-stretch property ใช้ระบุค่าเหล่านี้
font-style
เพื่อทำให้ข้อความเอียงด้วยมุม font-style property ถูกใช้
font-variant
font-variant อนุญาตให้เราระบุว่าองค์ประกอบควรแสดงเป็น small caps หรือไม่
font-weight
ความหนาของตัวอักษรถูกระบุโดย font-weight property
line-height
คุณสมบัตินี้ตั้งค่าระยะห่างระหว่างสองบรรทัด
text-decoration
เพื่อ underline หรือ overline และจัดสไตล์มัน text-decoration ถูกใช้
text-shadow
เหมือน box-shadow คุณสมบัตินี้เพิ่มเงาให้ตัวอักษรตามต้องการ
เพิ่มเติมมีคุณสมบัติการจัดวางข้อความ เช่น text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap ฯลฯ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ font มีดังนี้:
Selector { font-property: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS fonts:
<!DOCTYPE html> <html> <head> <style> p { font: 1.6em arial; text-shadow: -3px -12px lightblue; } p + p { font: italic bold 12px/30px menu; text-shadow: unset; box-shadow: 0 0 5px 1px black; } div { width: 30%; font-size: 1.4em; font-family: cursive; background-color: tomato; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text</p> <p>This text is for demo and included here to display different font styles in CSS.</p> <div>Another text with different font style.</div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> p { font: oblique 5deg small-caps bold 1.3em/0.5px cursive; border: 3px solid lightcyan; } </style> </head> <body> <p>This is demo text</p> <p>This is another demo text</p> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
