Font-weight trong CSS là gì?

Thuộc tính font-weight dùng để thiết lập giá trị đậm, mỏng hoặc bình thường của chữ trong CSS. Mặc định của văn bản sẽ là normal.

Cách sử dụng Font-weight

Cú pháp:

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Các giá trị:

  • normal: Giá trị mặc định. Đây là kiểu văn bản thường
  • bold: giá trị chữ đậm hơn
  • bolder: giá trị chữ in đậm nhất
  • lighter: giá trị nhẹ hơn normal
  • number: giá trị các ký tự từ mỏng đến dày. 400 giống như bình thường và 700 giống như in đậm
  • initial: đặt thuộc tính này thành giá trị mặc định
  • inherit: thường hưởng từ phần tử cha

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>Ví dụ về font weight</h1>

<p class="normal">Đoạn văn bản bình thường</p>
<p class="light">Đoạn văn bản mỏng hơn</p>
<p class="thick">Đoạn văn bản đậm</p>
<p class="thicker">Đoạn văn bản đậm nhất</p>

</body>
</html>

font-weight

Khi làm việc với văn bản trong CSS có nhiều thuộc tính liên quan. Nhưng font weight sẽ giúp cho việc tự động thiết lập giá trị cho một phần tử được chọn. Chẳng hạn khi thiết kế trang web bạn sẽ có hai đoạn văn bản nhưng mỗi cái lại đặt class khác nhau. Vì thế khi áp CSS vào thì giá trị cũng không giống nhau.

Cùng chủ đề

Category:
Tags:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *