1. Vì sao cần quan tâm đến chữ?
Một website tốt hay không phần lớn phụ thuộc vào trải nghiệm đọc:
- Font chữ dễ nhìn
- Cỡ chữ phù hợp
- Khoảng cách dòng thoáng
- Độ đậm giúp nhấn mạnh nội dung
CSS cho phép bạn kiểm soát toàn bộ những điều này.
2. Thay đổi font chữ bằng font-family
body {
font-family: Arial, sans-serif;
}
Ariallà font chínhsans-seriflà font dự phòng nếu Arial không có- Viết nhiều font cách nhau bằng dấu phẩy, font đầu tiên còn lại thì dùng
Các nhóm font thường dùng:
| Nhóm | Ví dụ | Phong cách |
|---|---|---|
| Sans-serif | Arial, Helvetica, Roboto, Tahoma | Không chân, hiện đại |
| Serif | Times New Roman, Georgia | Có chân, cổ điển |
| Monospace | Courier New, Consolas | Dùng cho code |
Ví dụ:
h1 {
font-family: 'Georgia', serif;
}
3. Cỡ chữ – font-size
p {
font-size: 18px;
}
Đơn vị thường dùng:
px: pixel – đơn vị cố địnhem,rem: đơn vị tương đối1em= cỡ chữ của phần tử cha1rem= cỡ chữ mặc định của<html>(thường là 16px)
Ví dụ:
h2 {
font-size: 1.5rem; /* khoảng 24px */
}
4. Độ đậm chữ – font-weight
h1 {
font-weight: bold;
}
Ngoài bold, còn có thể dùng số:
| Giá trị số | Mức độ |
|---|---|
| 100 | Rất mảnh |
| 400 | Bình thường |
| 700 | Đậm |
| 900 | Rất đậm |
Ví dụ:
p.important {
font-weight: 700;
}
5. Khoảng cách dòng – line-height
p {
line-height: 1.6;
}
- Dùng số (không đơn vị) để nhân với cỡ chữ
- Hoặc dùng
px,em,remcũng được
Mẹo: line-height từ 1.4 đến 1.8 là lý tưởng để dễ đọc.
6. Viết tắt với font
Bạn có thể gộp 1 dòng:
p {
font: 16px/1.5 Arial, sans-serif;
}
→ Gồm font-size + line-height + font-family
7. Thực hành
style.css
body {
font-family: Tahoma, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font-family: Georgia, serif;
font-size: 32px;
font-weight: 700;
}
p.note {
font-style: italic;
font-weight: 300;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 4 – Font chữ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS giúp chữ đẹp hơn</h1>
<p>Đây là đoạn văn thông thường.</p>
<p class="note">Đây là ghi chú nghiêng và nhẹ.</p>
</body>
</html>
8. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
font-family | Chọn kiểu font |
font-size | Kích thước chữ |
font-weight | Độ đậm chữ |
line-height | Khoảng cách giữa các dòng |
Thảo luận