CSS đóng một vai trò quan trọng trong việc tạo kiểu phông chữ. Các thuộc tính phông chữ CSS cho phép chúng tôi thay đổi họ phông chữ, kích thước phông chữ, phông chữ-weight, font-kerning và nhiều thuộc tính khác. Thuộc tính phông chữ CSS là cách viết tắt của font-style, font-variant, font-weight, font-size / line-height và font-family. Hơn nữa, chúng ta có thể áp dụng các kiểu cho văn bản thông qua trang trí văn bản bằng cách sử dụng CSS text-shadow, text-stroke, text-fill-color, color, v.v.
màu sắc
Thuộc tính này được sử dụng để thay đổi màu của 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.
chiều cao dòng
Thuộc tính này đặt khoảng cách giữa hai dòng.
trang trí văn bản
Để gạch dưới hoặc gạch ngang và tạo kiểu cho nó, trang trí văn bản được sử dụng.
text-shadow
Giống như box-shadow, thuộc tính này thêm bóng cho các ký tự như mong muốn.
Hơn nữa, có các thuộc tính bố cục văn bản như thụt lề văn bản, tràn văn bản, khoảng trắng, ngắt từ, hướng, dấu gạch nối, hướng văn bản, bọc từ, v.v.
Cú pháp
Cú pháp của thuộc tính phông chữ như sau -
Selector {
font-property: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính phông chữ CSS -
<!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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
