คุณสมบัติแบบอักษร CSS ช่วยให้เราปรับเปลี่ยนลักษณะที่ปรากฏของข้อความได้ คุณสมบัติต่อไปนี้ช่วยให้เราจัดรูปแบบข้อความได้
ตระกูลแบบอักษร
คุณสมบัตินี้ใช้เพื่อกำหนดแบบอักษรสำหรับองค์ประกอบ
การจัดรูปแบบแบบอักษร
เพื่อให้การเว้นวรรคอักขระสม่ำเสมอและเพิ่มความสามารถในการอ่าน จะใช้คุณสมบัติการจัดรูปแบบแบบอักษร อย่างไรก็ตาม คุณสมบัตินี้เป็นแบบอักษรเฉพาะ
ขนาดตัวอักษร
คุณสมบัติขนาดแบบอักษรกำหนดขนาดของแบบอักษร
การยืดแบบอักษร
แบบอักษรบางตัวมีใบหน้าเพิ่มเติม เช่น ย่อ ตัวหนา ฯลฯ คุณสมบัติการยืดแบบอักษรใช้เพื่อระบุสิ่งเหล่านี้
รูปแบบตัวอักษร
ในการทำให้ข้อความเป็นตัวเอียงด้วยมุม ให้ใช้คุณสมบัติรูปแบบฟอนต์
รูปแบบตัวอักษร
font-variant ช่วยให้เราระบุว่าองค์ประกอบควรแสดงเป็นตัวพิมพ์เล็กหรือไม่
น้ำหนักแบบอักษร
ตัวหนาของอักขระถูกกำหนดโดยคุณสมบัติ font-weight
นอกจากนี้เรายังสามารถใช้คุณสมบัติแบบอักษรซึ่งเป็นชวเลขสำหรับคุณสมบัติข้างต้นทั้งหมดได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติฟอนต์มีดังนี้ -
Selector {
font: /*value*/
} ตัวอย่างต่อไปนี้แสดงคุณสมบัติแบบอักษร CSS -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 3px;
float: left;
font-family: "Matura MT Script Capitals";
font-size: 200%;
}
#a {
font-style: normal;
}
#b {
font-style: italic;
}
#c {
font-style: oblique 40deg;
font-family: "Harlow Solid Italic";
}
</style>
</head>
<body>
<div id="a">Normal Demo</div>
<div id="b">Italic Demo</div>
<div id="c">Oblique Demo</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-size: 1.1em;
list-style: circle;
}
li:first-child {
background-color: seashell;
font-family: cursive;
}
li:nth-child(2) {
background-color: azure;
font-family: "Brush Script Std", serif;
}
li:last-child {
background-color: springgreen;
font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Learning Scala</h2>
<ul>
<li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
<li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
<li>Scala provides a lightweight syntax for defining anonymous functions</li>
</ul>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
