Font-weight - Thủ thuật CSS

Các font-weightbất động sản thiết lập trọng lượng, hoặc độ dày, trong một phông chữ và phụ thuộc hoặc các kiểu phông chữ có sẵn trong một gia đình phông chữ hoặc trọng lượng được xác định bởi trình duyệt.

span ( font-weight: bold; )

Các font-weightbất động sản chấp nhận hoặc là một giá trị từ khóa hoặc giá trị số được xác định trước. Các từ khóa có sẵn là:

normal
bold
bolder
lighter

Các giá trị số có sẵn là:

100
200
300
400
500
600
700
800
900

Giá trị từ khóa normalánh xạ tới giá trị số 400và giá trị boldánh xạ tới 700.

Để xem bất kỳ hiệu ứng nào bằng cách sử dụng các giá trị khác 400hoặc 700, phông chữ đang được sử dụng phải có các mặt tích hợp phù hợp với các trọng số được chỉ định đó.

Nếu phông chữ có phiên bản in đậm (“700”) hoặc bình thường (“400”) như một phần của họ phông chữ, trình duyệt sẽ sử dụng phiên bản đó. Nếu không có sẵn, trình duyệt sẽ bắt chước phiên bản phông chữ in đậm hoặc bình thường của chính nó. Nó sẽ không bắt chước các trọng lượng không khả dụng khác. Phông chữ thường sử dụng các tên như “Thông thường” và “Nhẹ” để xác định bất kỳ trọng lượng phông chữ thay thế nào.

Bản trình diễn sau minh họa việc sử dụng các giá trị trọng lượng thay thế:

Kiểm tra cây bút này!

Bản trình diễn ở trên sử dụng phông chữ miễn phí Open Sans, được nhúng bằng API Phông chữ Web của Google. Phông chữ được tải với tất cả các trọng lượng phông chữ có sẵn và do đó, bằng cách sử dụng thuộc font-weighttính, các trọng số sẵn có khác nhau được hiển thị như được mô tả bởi văn bản của mỗi đoạn. Các trọng lượng không khả dụng chỉ hiển thị trọng lượng gần nhất một cách hợp lý.

Các phông chữ phổ biến như Arial, Helvetica, Georgia, v.v. không có trọng số khác với 400và 700. Vì vậy, cùng một bản trình diễn được hiển thị với một trong những phông chữ đó sẽ chỉ hiển thị hai trọng số trong chín đoạn văn.

Sử dụng từ khóa "táo bạo hơn" và "nhẹ nhàng hơn"

Các giá trị từ khóa boldervà lightercó liên quan đến trọng lượng phông chữ được tính toán của phần tử mẹ. Trình duyệt sẽ tìm kiếm trọng lượng "đậm hơn" hoặc "nhẹ hơn" gần nhất, tùy thuộc vào những gì có sẵn trong họ phông chữ, nếu không, nó sẽ chỉ cần chọn "400" hoặc "700", tùy thuộc vào đó là hợp lý nhất.

Các phần tử con sẽ không kế thừa các giá trị từ khóa “đậm hơn” và “nhẹ hơn”, nhưng thay vào đó sẽ kế thừa trọng số đã tính.