Thuộc tính phông chữ CSS cho phép chúng tôi sửa đổi giao diện của văn bản. Các thuộc tính sau đây giúp chúng tôi tạo kiểu cho văn bản.
font-family
Thuộc tính này được sử dụng để đặt mặt phông chữ cho một phần tử.
font-kerning
Để làm cho khoảng cách ký tự đồng nhất và tăng khả năng đọc, thuộc tính font-kerning được sử dụng. Tuy nhiên, thuộc tính này là phông chữ cụ thể.
kích thước phông chữ
Thuộc tính font-size đặt kích thước của phông chữ.
phông chữ kéo dài
Một số phông chữ có các mặt bổ sung như đặc, đậm, v.v. Thuộc tính font-stretch được sử dụng để chỉ định các phông chữ này.
kiểu phông chữ
Để in nghiêng văn bản theo một góc, thuộc tính font-style được sử dụng.
font-variant
font-variant cho phép chúng tôi chỉ định xem một phần tử có nên được hiển thị bằng chữ hoa nhỏ hay không.
font-weight
Độ đậm của các ký tự được chỉ định bởi thuộc tính font-weight.
Chúng tôi cũng có thể sử dụng thuộc tính phông chữ là cách viết tắt cho tất cả các thuộc tính trên.
Cú pháp
Cú pháp của thuộc tính phông chữ như sau -
Selector {
font: /*value*/
} Các ví dụ sau minh họa thuộc tính phông chữ CSS -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
