Phông Chữ

Nam Nguyễn

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.

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).

Họ Phông Arial

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-serifmonospace. 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...

Tên Họ Chung - Generic Family Names

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.

So Sánh Serif và Sans-serif font

Chạy Code

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.

body {
    font-family:  Arial, Helvetica, sans-serif ;
}

Chạy Code

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;
}

Chạy Code

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;
}

Chạy Code

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ị.

Độ Đậ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;
}

Chạy Code

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ữ.

body {
    font-style: italic;
}

Chạy Code

Thêm Phản Hồi