Font-weight trong CSS: Điều khiển độ đậm chữ dễ dàng!

Bạn muốn làm cho tiêu đề của mình nổi bật hơn? Hay nhấn mạnh một vài từ quan trọng trong đoạn văn? Hãy khám phá font-weight trong CSS, một thuộc tính mạnh mẽ giúp bạn điều khiển độ đậm nhạt của chữ một cách dễ dàng. Hãy cùng TidaDigi tìm hiểu về CSS và cách sử dụng font-weight hiệu quả!

Font-weight là gì?

font-weight là một thuộc tính CSS xác định độ đậm (hay độ dày) của phông chữ. Thuộc tính này cho phép bạn làm cho văn bản trở nên đậm hơn hoặc nhạt hơn so với kiểu chữ mặc định. Việc sử dụng font-weight một cách hợp lý sẽ giúp cải thiện đáng kể khả năng đọc và tính thẩm mỹ của trang web.

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

font-weight chấp nhận nhiều giá trị khác nhau, bao gồm các từ khóa và các giá trị số. Dưới đây là một số giá trị phổ biến:

• normal : Đây là giá trị mặc định, tương đương với độ đậm 400.
• bold : Làm cho văn bản trở nên đậm. Tương đương với độ đậm 700.
• bolder : Làm cho văn bản đậm hơn so với độ đậm của phần tử cha.
• lighter : Làm cho văn bản nhạt hơn so với độ đậm của phần tử cha.
• 100 - 900 : Các giá trị số từ 100 đến 900, trong đó 100 là nhạt nhất và 900 là đậm nhất. Giá trị 400 tương đương với normal và 700 tương đương với bold .

Việc lựa chọn giá trị font-weight phù hợp phụ thuộc vào thiết kế tổng thể của trang web và mục đích sử dụng của văn bản.

Sử dụng Font-weight trong CSS

Để sử dụng font-weight , bạn chỉ cần thêm thuộc tính này vào CSS của phần tử mà bạn muốn thay đổi độ đậm. Ví dụ:

p { font-weight: normal; /* Độ đậm bình thường */ } h1 { font-weight: bold; /* Độ đậm cao */ } .emphasize { font-weight: 600; /* Độ đậm vừa phải */ }

Trong ví dụ trên, tất cả các thẻ <p> sẽ có độ đậm bình thường, các thẻ <h1> sẽ có độ đậm cao, và các phần tử có class "emphasize" sẽ có độ đậm vừa phải.

Ví dụ thực tế

Hãy xem một ví dụ thực tế về cách sử dụng font-weight để cải thiện trải nghiệm người dùng:

<style> .product-name { font-size: 1.2em; font-weight: bold; } .product-description { font-weight: normal; } .price { font-weight: 700; color: green; } </style> <div class="product"> <h2 class="product-name">Sản phẩm tuyệt vời</h2> <p class="product-description">Mô tả chi tiết về sản phẩm. Chất lượng cao, giá cả hợp lý.</p> <p class="price">Giá: 99.000 VNĐ</p> </div>

Trong ví dụ này, tên sản phẩm được làm đậm để thu hút sự chú ý, mô tả sản phẩm có độ đậm bình thường để dễ đọc, và giá sản phẩm được làm đậm và có màu xanh lá cây để nổi bật.

Font-weight và khả năng truy cập (Accessibility)

Khi sử dụng font-weight , hãy đảm bảo rằng độ tương phản giữa văn bản và nền đủ cao để người dùng có thể đọc được dễ dàng. Đặc biệt, người dùng có thị lực kém có thể gặp khó khăn với văn bản quá nhạt hoặc quá đậm. Hãy sử dụng các công cụ kiểm tra độ tương phản để đảm bảo rằng trang web của bạn đáp ứng các tiêu chuẩn về khả năng truy cập.

Các lưu ý khi sử dụng Font-weight

Khi sử dụng font-weight , hãy lưu ý những điều sau:

• Không nên lạm dụng font-weight: bold . Việc sử dụng quá nhiều chữ đậm có thể làm cho trang web trở nên rối mắt và khó đọc.
• Hãy sử dụng font-weight một cách nhất quán trên toàn bộ trang web để tạo ra một giao diện chuyên nghiệp và dễ nhìn.
• Kiểm tra kỹ lưỡng trên nhiều thiết bị và trình duyệt khác nhau để đảm bảo rằng font-weight hiển thị đúng như mong muốn.

Properly utilizing the font-weight property in CSS can significantly enhance the visual appeal and readability of your website.