CSS trọng lượng phông chữ

Thuộc tính font-weight được sử dụng để thiết lập độ đậm và độ dày của phông chữ. Nhưng có một số phông chữ không đặt tất cả các trọng số. Chúng chỉ khả dụng trên bình thường hoặc in đậm

Các phông chữ phổ biến như Arial, Helvetica, Georgia, v.v. không có trọng lượng khác 400 và 700

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

  
    Title of the document
    
  
  
    
Font-weight property example
    
We used a bolder text here.
  

  
    Title of the document
    
  
  
    
Font-weight property example
    
We used normal weight here.

  


    
This is a lighter weight.
    
We used bold weight here.
    
We used a bolder text here.
    
We set font-weight 600 here.
  

Thuộc tính font-weight đặt trọng lượng hoặc độ dày của phông chữ và phụ thuộc vào các mặt phông chữ có sẵn trong họ phông chữ hoặc trọng số do trình duyệt xác định

span {
  font-weight: bold;
}

Thuộc tính font-weight chấp nhận 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
• ________số 8
• lighter

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

• 
  
    
      Title of the document
      
    
    
      
  Font-weight property example
      
  We used a bolder text here.
    
  

  0

• 
  
    
      Title of the document
      
    
    
      
  Font-weight property example
      
  We used a bolder text here.
    
  

  1

• 
  
    
      Title of the document
      
    
    
      
  Font-weight property example
      
  We used a bolder text here.
    
  

  2
• font-weight0
• font-weight1
• font-weight2
• font-weight3
• font-weight4
• font-weight5

Giá trị từ khóa normal ánh xạ tới giá trị số font-weight0 và giá trị bold ánh xạ tới font-weight3

Để xem bất kỳ hiệu ứng nào bằng cách sử dụng các giá trị khác với font-weight0 hoặc font-weight3, 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ố đã chỉ định đó

Nếu một 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ữ, thì trình duyệt sẽ sử dụng phông chữ đó. Nếu những thứ đó 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 số không có sẵn khác. Các phông chữ thường sử dụng các tên như “Thông thường” và “Ánh sáng” để xác định bất kỳ trọng lượng phông chữ thay thế nào

Bản trình diễn sau đây minh họa việc sử dụng các giá trị trọng số thay thế

Dự phòng nhúng CodePen

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

Các phông chữ phổ biến như Arial, Helvetica, Georgia, v.v. không có trọng lượng khác với font-weight0 và font-weight3. Vì vậy, bản trình diễn tương tự đượ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 “đậm hơn” và “nhẹ hơn”

Các giá trị từ khóa bolder và lighter có liên quan đến trọng lượng phông chữ được tính toán của phần tử gốc. Trình duyệt sẽ tìm trọng lượng "đậm" hoặc "nhẹ" 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ỉ chọn "400" hoặc "700", tùy theo ý nghĩa nào phù hợp nhất

Các phần tử con sẽ không kế thừa các giá trị từ khóa “bolder” và “lighter” mà thay vào đó sẽ kế thừa trọng số được tính toán

Vấn đề tương thích tinh tế. chính xác vị trí nào trong phạm vi 100-900 thì lighter bắt đầu tạo văn bản in đậm?

font-weight dùng để thiết lập trọng lượng [độ đậm] của phông chữ. normal là mặc định

Vấn đề ở đây là bản thân phông chữ phải có một hoặc nhiều trọng số. Nếu nó không có, bạn không thể làm cho nó đậm được

Nếu bạn muốn có trọng lượng hoàn toàn an toàn, chỉ cần sử dụng

span {
  font-weight: bold;
}

3 và chấp nhận mọi thứ mà trình duyệt cung cấp cho bạn

Nếu bạn là người thích mạo hiểm, bạn có thể sử dụng các giá trị

span {
  font-weight: bold;
}

4. Họ phải đưa ra chín trọng lượng khác nhau, từ rất nhẹ đến rất đậm. Một số phông chữ hỗ trợ tất cả chín trọng số, mặc dù một số hỗ trợ bốn hoặc năm

span {
  font-weight: bold;
}

5 được cho là bằng với normal, trong khi

span {
  font-weight: bold;
}

7 bằng với bold

Cuối cùng, có các giá trị tương đối bolder và lighter làm cho một đoạn văn bản đậm hơn hoặc nhạt hơn một bước so với trọng lượng mặc định [do đó phụ thuộc vào giá trị tuyệt đối font-weight mà bạn đã xác định]

trường hợp thử nghiệm

Đối với trường hợp thử nghiệm, tôi sử dụng Segoe UI cho Windows và Helvetica Neue cho Mac. Segoe UI có bốn trọng số và Helvetica Neue có năm. Nếu bạn chỉ thấy hai trọng số, trình duyệt của bạn không xử lý đúng font-weight

Trọng lượng phông chữ 600 là gì?

Trọng lượng phông chữ có nghĩa là gì?