CSS font-weight – Cách in đậm font chữ trong CSS

Posted by Lập Trình Viên CSS 6 phút đọc

CSS font-weight là một thuộc tính trong CSS được sử dụng để thiết lập độ dày và độ đậm của phông chữ. Nó được sử dụng để xác định trọng lượng của văn bản. Trọng lượng có sẵn phụ thuộc vào font-family, mà được sử dụng bởi trình duyệt.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới.

CSS font-weight là gì?

Thuộc tính CSS font-weight được sử dụng để điều chỉnh độ dày và tương phản của văn bản hiển thị trên trang web. Điều này cho phép bạn làm cho văn bản nổi bật hoặc giảm thiểu khi cần thiết.

Bất kỳ ai muốn thay đổi kiểu văn bản của trang web của họ có thể sử dụng thuộc tính CSS font-weight. Các nhà thiết kế web hay các lập trình viên đều có thể sử dụng nó để tăng độ nổi bật của tiêu đề hoặc đoạn văn bản trên trang web của mình.

Hướng dẫn CSS font-weight

Thuộc tính CSS font-weight có thể được sử dụng để xác định độ dày và độ đậm của văn bản. Các giá trị của thuộc tính font-weight bao gồm:

  • normal: Giá trị mặc định cho font-weight, với giá trị số là 400.
  • lighter: Nó xem xét font-weight hiện có của font-family và giảm độ dày so với phần tử cha.
  • bolder: Nó xem xét font-weight hiện có của font-family và tăng độ dày so với phần tử cha.
  • bold: Được sử dụng để xác định độ đậm, và giá trị số của nó là 700.
  • số: Sử dụng để thiết lập font-weight dựa trên số được chỉ định. Phạm vi của nó có thể từ 1 đến 1000.
  • initial: Sử dụng để thiết lập font-weight về giá trị mặc định.

Dưới đây là ví dụ minh họa cho thuộc tính này:

p {
  font-weight: bold;
}

Ví dụ cụ thể:

<!DOCTYPE html> 
  
<html> 
<head> 
    <title> font-weight property </title> 
  
    
    <style> 
        body{ 
            font-family: sans-serif; 
        } 
        p.one{ 
            font-weight: normal; 
        } 
        p.two{ 
            font-weight: lighter; 
        } 
            
        p.three{ 
            font-weight: bolder; 
        } 
      
        p.four{ 
            font-weight: bold; 
        } 
      
        p.five{ 
            font-weight: 1000; 
        } 
      
        p.six{ 
            font-weight: initial; 
        } 
        p.seven{ 
            font-weight: inherit; 
        } 
        p.eight{ 
            font-weight: unset; 
        } 
      
    </style> 
</head> 
  
<body> 
    <p class="one"> 
       normal property value
    </p> 
  
    <p class="two"> 
      lighter property value
    </p> 
  
    <p class="three"> 
      bolder property value
    </p> 
    <p class="four"> 
      bold property value
   </p> 
   <p class="five"> 
      number property value
   </p> 

    <p class="six"> 
      initial property value
    </p> 
    <p class="seven"> 
      inherit property value
    </p> 
    <p class="eight"> 
      unset property value
    </p> 
</body> 
</html>

Ưu và Nhược điểm CSS font-weight

Ưu điểm của thuộc tính CSS font-weight là cho phép bạn kiểm soát độ dày và độ đậm của văn bản, giúp nổi bật hoặc làm giảm thiểu văn bản khi cần thiết. Tuy nhiên, một số nhược điểm của thuộc tính này bao gồm:

  • Không phải tất cả các font-family đều có độ dày và độ đậm khác nhau, điều này có thể ảnh hưởng đến sự hiệu quả của thuộc tính.
  • Giá trị số có thể làm cho mã CSS của bạn trở nên khó đọc và khó bảo trì.

Lời khuyên CSS font-weight

Khi sử dụng thuộc tính CSS font-weight, hãy chắc chắn rằng bạn đã kiểm tra font-family được sử dụng bởi trình duyệt để biết các giá trị trọng lượng có sẵn. Nếu không, bạn có thể xác định sai giá trị, dẫn đến hiển thị không mong muốn. Bạn cũng nên tránh sử dụng giá trị số quá cao để tránhmã CSS của bạn trở nên khó đọc và khó bảo trì. Nếu có thể, hãy sử dụng các giá trị khác để thay thế cho giá trị số.

Hơn nữa, hãy nhớ rằng quá sử dụng thuộc tính font-weight có thể khiến trang web của bạn trông không chuyên nghiệp. Hãy sử dụng nó một cách hợp lý để tạo ra bố cục văn bản đẹp và dễ đọc.

1. Tôi có thể sử dụng thuộc tính CSS font-weight cho tất cả các font-family không?

Không phải tất cả các font-family đều có độ dày và độ đậm khác nhau, vì vậy việc sử dụng thuộc tính font-weight có thể không hoạt động với tất cả các font-family.

2. Giá trị đặt trực tiếp của font-weight được sử dụng như thế nào?

Giá trị font-weight sẽ được áp dụng cho toàn bộ phần tử được áp dụng thuộc tính này.

3. Tôi có thể kết hợp nhiều giá trị font-weight cho một phần tử không?

Không, chỉ có thể sử dụng một giá trị font-weight cho một phần tử.

4. Tôi có thể sử dụng thuộc tính font-weight để chỉ định kích thước của phông chữ không?

Không, thuộc tính font-weight chỉ xác định độ dày và độ đậm của phông chữ, không liên quan đến kích thước của nó.

5. Làm thế nào để kiểm tra giá trị font-weight hiện tại của một font-family?

Bạn có thể sử dụng công cụ lập trình như DevTools của Chrome hoặc Firebug của Firefox để kiểm tra giá trị font-weight hiện tại của một font-family.