Font-Weight Là Gì – Đặt Trọng Lượng Phông Chữ Bằng Các Lớp Bootstrap

CSS cung cấp các thuộc tính liên quan đến phông giúp chúng ta có thể dễ dàng thiết lập họ phông chữ, kích thước phông chữ, độ đậm của phông chữ và kiểu phông chữ sử dụng trên trang web.

Đang xem: Font-weight là gì

Họ Phông – Font Family

Họ phông (hay font family) trong CSS bao gồm một nhóm các phông chữ liên quan với nhau.

Ví dụ họ phông chữ Arial bao gồm các phông chữ như: Arial Regular Arial Italic (chữ in nghiêng), Arial Narrow (chữ với khoảng cách hẹp), Arial Bold (chữ in đậm), Arial Black (chữ nét to) và Arial Bold Italic (chữ in đậm và in nghiêng).

*

Trong CSS, chúng ta họ phông được phân thành hai loại chính:

Họ phông theo tên cụ thể (font family name). Ví dụ: Arial, Verdana, Times New Roman, Georgia….Họ chung (generic family). Loại này chỉ gồm 3 họ là serif, sans-serif và monospace. Mỗi họ trong loại này bao gồm một hoặc nhiều họ phông cụ thể ở trên. Ví dụ họ sans-serif bao gồm các hộ cụ thể như Arial, Verdana, Helvetica…

*

Hình dưới đây minh hoạ sự khác biệt giữa các ký tự thuộc họ serif và họ sans-serif.

*

Phân Biệt Giữa SERIF và SANS-SERIF

Thuộc tính font-family

Thuộc tính font-family dùng để thiết lập họ phông chữ cho các phần tử trên trang web.

body { font-family: Arial;}Khi quy định phông chữ cho phần tử trên trang web chúng ta nên chọn nhiều hơn một họ phông chữ và thường đi kèm theo một họ chung (generic family). Khi đó nếu như họ phông đầu tiên không được cài đặt trên thiết bị hiển thị trang web thì các phông chữ kế tiếp sẽ được sử dụng.

Xem thêm: Bánh Cúng Cô Hồn Là Bánh Gì ? Ăn Được Không? Mâm Cỗ Cúng Cô Hồn Bao Gồm Những Món Gì

body { font-family: Arial, Helvetica, sans-serif ;}Thiết Lập Phông Chữ trong CSS với Thuộc Tính font-family

Trong trường hợp như trên nếu một ký tự nào đó không tồn tại trong phông đầu tiên (Arial) thì phông chữ theo sau nó là Helvetica sẽ được áp dụng. Trong trường hợp mà ngay cả phông thứ 2 cũng không có sẵn thì thì bất kỳ họ phông nào thuộc họ chung sans-serif đang được cài trên thiết bị sẽ được sử dụng.

Với các họ phông với tên gồm nhiều hơn một từ như Times New Roman thì chúng ta sẽ cần phải đặt tên họ phông này vào bên trong cặp dấu nháy.

Cỡ Chữ

Sử dụng thuộc tính font-size để quy định kích thước phông chữ.

body { font-size: 14px;}Kích Thước Phông Chữ Trong CSS

Giá trị của thuộc tính font-size có thể sử dụng loại đơn vị tuyệt đối như px (thường dùng), pt hoặc cm… hoặc đơn vị tương đối như %, em, rem…

body { font-size: 14px;}.large { font-size: 1.5em;}.extra-large { font-size: 2em;}Kích Thước Phông Chữ Theo Đơn Vị “EM”

Với các đơn vị tương đối thì trình duyệt cũng sẽ quy đổi sang đơn vị tuyệt đối khi hiển thị.

Xem thêm: Tụng Kinh Sám Hối Cao Đài Nhaccuatui, Kinh Sám Hối Đạo Cao Đài

Độ Đậm Nhạt

Sử dụng thuộc tính font-weight để quy định độ đậm nhạt của chữ. Nó có thể nhận các giá trị như: bold, normal, bolder hoặc lighter. Ví dụ:

.bold { font-weight: bold;}.normal { font-weight: normal;}Độ Đậm Của Phông Chữ trong CSS

Giá trị của thuộc tính font-weight có thể nhận giá trị là số thay vì chữ như trên:

.bold { font-weight: 700;}.normal { font-weight: 400;}

Kiểu Chữ

Sử dụng thuộc tính font-style để quy định kiểu chữ in nghiêng, in thường hay in đậm… cho phông chữ.