Site icon donghochetac

Tìm hiểu về Font-weight trong CSS: Định nghĩa, Cách sử dụng và Tối ưu

donghochetacdh

Trong CSS, font-weight là thuộc tính quan trọng để kiểm soát độ đậm nhạt của văn bản. Việc sử dụng font-weight một cách hiệu quả không chỉ cải thiện khả năng đọc mà còn góp phần vào thiết kế trực quan của trang web. Bài viết này sẽ đi sâu vào font-weight trong CSS, từ định nghĩa cơ bản đến các kỹ thuật nâng cao và tối ưu SEO.

font-weight xác định độ dày hoặc độ đậm của ký tự trong một đoạn văn bản. Các giá trị phổ biến bao gồm normal, bold, và các giá trị số từ 100 đến 900, mỗi giá trị đại diện cho một mức độ đậm khác nhau.

Class Styles
font-thin font-weight: 100;
font-extralight font-weight: 200;
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;

Các giá trị của Font-weight

  • normal: Giá trị mặc định, tương đương với 400.
  • bold: Chữ đậm, tương đương với 700.
  • lighter: Đặt độ đậm nhạt hơn so với phần tử cha.
  • bolder: Đặt độ đậm đậm hơn so với phần tử cha.
  • 100 – 900: Các giá trị số, trong đó 100 là mỏng nhất và 900 là đậm nhất. Các giá trị này cho phép kiểm soát chi tiết hơn độ đậm của chữ.

Ví dụ cơ bản

Để sử dụng font-weight, bạn có thể áp dụng trực tiếp vào các phần tử HTML thông qua CSS:

p {
  font-weight: bold; /* In đậm đoạn văn */
}

h1 {
  font-weight: 500; /* Đặt độ đậm vừa phải cho tiêu đề */
}

Sử dụng các class định sẵn

Nhiều framework CSS cung cấp các class hỗ trợ sẵn cho font-weight, giúp việc áp dụng trở nên nhanh chóng và dễ dàng hơn. Ví dụ:

<p class="font-light">Đây là đoạn văn bản light.</p>
<p class="font-normal">Đây là đoạn văn bản normal.</p>
<p class="font-medium">Đây là đoạn văn bản medium.</p>
<p class="font-semibold">Đây là đoạn văn bản semibold.</p>
<p class="font-bold">Đây là đoạn văn bản bold.</p>

Sử dụng giá trị tùy chỉnh

Bạn cũng có thể sử dụng cú pháp font-[] để thiết lập font-weight với giá trị tùy chỉnh:

<p class="font-[620]">Đoạn văn bản này có độ đậm tùy chỉnh.</p>

Điều này cho phép bạn kiểm soát chính xác độ đậm nhạt của văn bản, phù hợp với yêu cầu thiết kế cụ thể.

Sử dụng biến CSS

Để linh hoạt hơn, bạn có thể sử dụng biến CSS để quản lý font-weight:

:root {
  --my-font-weight: 600;
}

p {
  font-weight: var(--my-font-weight);
}

Hoặc sử dụng cú pháp font-():

<p class="font-(--my-font-weight)">Đoạn văn bản này sử dụng biến CSS để định nghĩa độ đậm.</p>

Điều này giúp bạn dễ dàng thay đổi font-weight trên toàn bộ trang web chỉ bằng cách thay đổi giá trị của biến.

Thiết kế Responsive

Để đảm bảo trang web hiển thị tốt trên mọi thiết bị, bạn có thể sử dụng các breakpoint để điều chỉnh font-weight theo kích thước màn hình:

p {
  font-weight: normal; /* Mặc định */
}

@media (min-width: 768px) {
  p {
    font-weight: bold; /* In đậm trên màn hình lớn hơn */
  }
}

Hoặc sử dụng các class responsive nếu bạn đang sử dụng một framework CSS:

<p class="font-normal md:font-bold">Đoạn văn bản này bình thường trên mobile và đậm hơn trên desktop.</p>

Tùy chỉnh Theme

Trong nhiều framework CSS, bạn có thể tùy chỉnh các giá trị font-weight trong theme. Ví dụ:

module.exports = {
  theme: {
    extend: {
      fontWeight: {
        'extrablack': 1000,
      }
    }
  }
}

Sau đó, bạn có thể sử dụng class font-extrablack trong HTML:

<div class="font-extrablack">Văn bản cực đậm.</div>

Tối ưu SEO với Font-weight

  • Sử dụng hợp lý: Không nên lạm dụng font-weight: bold cho toàn bộ trang web. Hãy sử dụng nó một cách chiến lược để làm nổi bật các từ khóa quan trọng hoặc các phần tử tiêu đề.
  • Cấu trúc nội dung: Sử dụng font-weight để tạo sự phân cấp rõ ràng trong nội dung. Ví dụ, tiêu đề <h1> nên có font-weight cao hơn so với tiêu đề <h2>, và các đoạn văn bản thông thường nên có font-weight: normal.
  • Khả năng đọc: Đảm bảo rằng sự kết hợp giữa font-weight và kích thước phông chữ (font-size) tạo ra văn bản dễ đọc. Độ tương phản tốt giữa văn bản và nền cũng rất quan trọng.

Kết luận

Font-weight là một thuộc tính CSS mạnh mẽ giúp bạn kiểm soát độ đậm nhạt của văn bản. Bằng cách sử dụng font-weight một cách thông minh, bạn có thể cải thiện đáng kể trải nghiệm người dùng và tối ưu hóa SEO cho trang web của mình. Hãy thử nghiệm với các giá trị khác nhau và tìm ra sự kết hợp phù hợp nhất cho dự án của bạn.

Exit mobile version