Thuộc tính font-weight trong CSS
Trần Thị Vân - 1237
- 12/07/2025
Chức năng của Thuộc tính font-weight trong CSS
Thuộc tính font-weight trong CSS dùng để quy định độ dày mỏng cho văn bản trong phần tử HTML, có nhiều độ dày khác nhau để cho lập trình viên chọn lựa.
Cú pháp của Thuộc tính font-weight trong CSS
font-weight: giatri;
giatri: Giá trị dùng để quy định độ dày mỏng cho văn bản trong phần tử HTML (Ví dụ: bold, 400, 100, 700, ....)
Ví dụ Thuộc tính font-weight trong CSS
font-weight: bold;
font-weight: normal;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: bolder;
font-weight: lighter;
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính font-weight trong CSS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính font-weight trong CSS</h1>
<p>Dùng để quy định độ dày mỏng cho văn bản trong phần tử HTML:</p>
<p style="font-weight: bold;">font-weight: bold;</p>
<p style="font-weight: normal;">font-weight: normal;</p>
<p style="font-weight: 100;">font-weight: 100;</p>
<p style="font-weight: 200;">font-weight: 200;</p>
<p style="font-weight: 300;">font-weight: 300;</p>
<p style="font-weight: 400;">font-weight: 400;</p>
<p style="font-weight: 500;">font-weight: 500;</p>
<p style="font-weight: 600;">font-weight: 600;</p>
<p style="font-weight: 700;">font-weight: 700;</p>
<p style="font-weight: 800;">font-weight: 800;</p>
<p style="font-weight: 900;">font-weight: 900;</p>
<p style="font-weight: bolder;">font-weight: bolder;</p>
<p style="font-weight: lighter;">font-weight: lighter;</p>
<p style="font-weight: inherit;">font-weight: inherit;</p>
<p style="font-weight: initial;">font-weight: initial;</p>
<p style="font-weight: revert;">font-weight: revert;</p>
<p style="font-weight: revert-layer;">font-weight: revert-layer;</p>
<p style="font-weight: unset;">font-weight: unset;</p>
</body>
</html>
Cách lựa chọn độ đậm chữ phù hợp với từng trường hợp
Giá trị font-weight nên được lựa chọn dựa trên vai trò của nội dung thay vì chỉ làm chữ đậm hoặc nhạt theo cảm tính. Phân cấp hợp lý giúp người đọc nhanh chóng nhận biết tiêu đề, nội dung chính và những thông tin cần chú ý.
Phân biệt font-weight 400, 500, 600 và 700
400 thường phù hợp với nội dung văn bản thông thường vì giữ được độ dễ đọc trong các đoạn dài. 500 tạo cảm giác nổi bật hơn nhưng vẫn khá nhẹ, thích hợp cho nhãn, menu hoặc những nội dung cần nhấn vừa phải.
600 thường được dùng cho tiêu đề phụ, nút hoặc các thành phần giao diện cần thu hút sự chú ý. 700 tạo độ tương phản rõ rệt, phù hợp với tiêu đề quan trọng hoặc nội dung cần nhấn mạnh.
.content {
font-weight: 400;
}
.label {
font-weight: 500;
}
.sub-title {
font-weight: 600;
}
.title {
font-weight: 700;
}
Khi nào nên dùng font-weight nhẹ hoặc đậm
Độ đậm nhẹ phù hợp với phần nội dung có nhiều chữ, giúp giao diện không bị nặng và người dùng có thể đọc trong thời gian dài. Ngược lại, độ đậm cao nên dành cho những thành phần cần tạo điểm dừng thị giác như tiêu đề, tên sản phẩm, thông tin quan trọng hoặc nút hành động.
Không nên sử dụng quá nhiều mức độ đậm trên cùng một khu vực. Một hệ thống phân cấp đơn giản, chẳng hạn nội dung thường dùng 400, nội dung phụ dùng 500 và tiêu đề dùng 600 hoặc 700, thường giúp giao diện rõ ràng hơn.
Những lưu ý khi sử dụng font-weight với font chữ
Không phải font chữ nào cũng cung cấp đầy đủ mọi mức độ đậm. Nếu font chỉ có một số biến thể nhất định, trình duyệt có thể sử dụng mức gần nhất hoặc mô phỏng độ đậm, khiến kiểu chữ hiển thị không đúng như mong muốn.
Khi thiết kế giao diện, nên kiểm tra font thực tế trên nhiều kích thước màn hình và duy trì một hệ thống độ đậm nhất quán. Việc này giúp nội dung dễ đọc hơn, đồng thời tạo sự đồng bộ giữa các khu vực của website.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính font-weight trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
