Để tạo hiệu ứng chữ đậm (bold) trong CSS, bạn phải sử dụng thuộc tính font-weight. Thuộc tính này xác định "trọng lượng" của font, tức là chữ xuất hiện dày/dậm đến mức nào. Bạn có thể dùng từ khóa hoặc giá trị số để chỉ định độ đậm.
CSS Bold: Hướng Dẫn
Thuộc tính font-weight thiết lập độ đậm của văn bản trên màn hình. Bạn có thể dùng từ khóa hoặc giá trị số.
Cú pháp:
font-weight: weightOfFont;
Giá trị weightOfFont là trọng lượng font bạn muốn áp dụng cho phần tử.
Thang Đo Font-Weight (100 - 1000)
Hãy hình dung font-family có thang đo độ đậm từ 100 đến 1000. Số càng lớn, chữ càng đậm.
Hãy nghiên cứu font-family bạn chọn. Một số font không sử dụng toàn bộ thang đo này.
Ví dụ dưới đây minh họa các mức độ đậm/nhạt của font phổ biến 'Arial', dùng cả số và từ khóa:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Font Weight Demo</title> <style> body { font-family: 'Arial'; font-size: 3rem; } span { font-size: 1.5rem; } p:nth-child(1) { font-weight: normal; } p:nth-child(2) { font-weight: bold; } p:nth-child(3) span { font-weight: bolder; } p:nth-child(4) span { font-weight: lighter; } p:nth-child(5) { font-weight: 100; } p:nth-child(6) { font-weight: 200; } p:nth-child(7) { font-weight: 300; } p:nth-child(8) { font-weight: 400; } p:nth-child(9) { font-weight: 500; } p:nth-child(10) { font-weight: 600; } p:nth-child(11) { font-weight: 700; } p:nth-child(12) { font-weight: 800; } p:nth-child(13) { font-weight: 900; } </style> </head> <body> <p>Hello World! <span>-- Normal</span></p> <p>Hello World! <span>-- Bold</span></p> <p>Hello World! <span>-- Bolder <br> -- con đậm hơn cha </span></p> <p>Hello World! <span>-- Lighter <br> -- con nhạt hơn cha </span> </p> <p>Hello World! <span>-- 100</span></p> <p>Hello World! <span>-- 200</span></p> <p>Hello World! <span>-- 300</span></p> <p>Hello World! <span>-- 400 'normal'</span></p> <p>Hello World! <span>-- 500</span></p> <p>Hello World! <span>-- 600</span></p> <p>Hello World! <span>-- 700 'bold'</span></p> <p>Hello World! <span>-- 800</span></p> <p>Hello World! <span>-- 900</span></p> </body> </html>
Lighter và Bolder: Chúng Có Nghĩa Gì Thực Sự?
Điều quan trọng: lighter và bolder không có nghĩa đen là "nhạt hơn nhạt" hay "đậm hơn đậm".
Chúng mang nghĩa tương đối so với phần tử cha. Khi con được đặt bolder, nó sẽ đậm hơn cha một cấp trọng lượng tương đối (cùng áp dụng cho lighter).
Các trọng lượng tương đối:
| Relative font-weight | Actual font-weight |
| thin | 100 |
| normal | 400 |
| bold | 700 |
| heavy | 900 |
Ví dụ: Cha có font-weight: 400. Con đặt font-weight: bolder → con trở thành 700. Nếu cha đã ở mức tối đa (900) hoặc tối thiểu (100), bolder/lighter sẽ không có tác dụng.
Ví Dụ Font Weight CSS
Giả sử thiết kế web cho Câu lạc bộ Tem Seattle. Họ muốn tiêu đề About Us trang About hiển thị đậm để thu hút chú ý. Khối văn bản lịch sử hiển thị bình thường (normal), nhưng một số cụm từ quan trọng cần in đậm.
Code minh họa:
<html> <p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p> <style> span { font-weight: bolder; }
Nhấn nút Run trong trình soạn thảo code để xem kết quả.
Trong HTML, đoạn văn được bao bởi <p>. Các cụm từ cần đậm được bao bởi <span>. CSS đặt font-weight: bolder cho mọi <span>, khiến chúng đậm hơn phần tử cha (<p>). Kết quả: "welcomes all" và "250 members" hiển thị đậm.
Chữ Đậm CSS Với Variable Fonts (Font Biến)
Các font mới hơn (CSS Fonts Level 4) gọi là Variable Fonts cho phép bất kỳ số nào từ 1 đến 1000 làm font-weight. Hỗ trợ trình duyệt hoàn thiện từ tháng 5/2020.
Kết Luận
Trong hướng dẫn này, chúng ta đã thảo luận thuộc tính font-weight và cách nó ảnh hưởng đến độ đậm của font.
Chúng ta học được bolder và lighter nghĩa là cách một cấp trọng lượng tương đối so với phần tử cha. Thực hành cho thấy dải giá trị font-weight khác nhau. Bạn sẽ nhanh chóng thành thạo việc định kiểu font với font-weight!
Để tìm hiểu thêm về CSS, đọc hướng dẫn Cách Học CSS. Bạn cũng có thể đọc hướng dẫn Cách Tạo Chữ Đậm Trong HTML nếu muốn làm đậm chữ mà không cần CSS.