Phông Chữ

CSS cho phép chúng ta có thể tuỳ biến phông chữ, cỡ chữ và tạo kiểu im đậm, in nghiêng.

Họ Phông (Font Family)

Khi quy định phông chữ cho văn bản chúng ta nên chọn nhiều hơn một loại phông khi đó nếu như loại phông đầu tiên không có trên máy tính của người dùng thì trình duyệt sẽ sử dụng các phông chữ kế tiếp. Các phông được chọn nên thuộc cùng một họ phông (font family).

Họ phông (hay font family) bao gồm một nhóm các phông chữ có thiết kế tương tự nhau. Chúng ta có hai cách khác nhau để quy định các phông được nhóm vào cùng một họ để sử dụng:

  • Sử dụng tên chung của họ phông: Ví dụ serif, san-serif hay monospace.
  • Liệt kê tên từng phông cụ thể: Ví dụ Times New RomanGeorgia hay ArialVerdana.
Tên họ phông Liệt kê từng phông Mô tả
Serif Times New Roman
Georgia
Họ phông serif bao gồm các phông có một đường viền được thêm vào ở cuối mỗi nét chữ
Sans-serif Arial
Verdana
"Sans" trong tiếng Pháp nghĩa là không - bao gồm các phông không có đường viền ở cuối các nét chữ
Monospace Courier New
Lucida Console
Bao gồm các phông mà mỗi ký tự có bề ngang như nhau

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

Thuộc tính font-family

Thuộc tính font-family dùng để quy định phông chữ (hay họ phông chữ) nào sẽ được áp dụng cho bộ chọn tương ứng.

body {
    font-family: Arial, Verdana, "Times New Roman";
}

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à Verdan sẽ được áp dụng. Trong trường hợp mà ngay cả phông thứ 2 không có ký tự này thì phông chữ thứ 3 sẽ được áp dụng.

Ở đây bạn cũng chú ý với các phông chữ có tên được tạo bởi nhiều chữ ghép lại như Times New Roman thì chúng ta sẽ cần phải đặt tên phông này vào bên trong ngoặc kép.

Cỡ Chữ

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

body {
    font-size: 16px;
}

Ngoài đươn vị là px (pixcel) bạn cũng có thể sử dụng đơn vị là em, ex, % hoặc pt. Tuy nhiên do việc sử dụng đơn vị px chiếm phần lớn nên tôi không đi vào giải thích các loại đơn vị này.

Độ Đậ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ụ:

p {
    font-weight: bold;
}

Ngoài ra, thuộc tính này có thể nhận giá trị là số thay vì chữ như trên. Với giá trị là số chúng ta sẽ sử dụng các số từ 100, 200, 300 tới 900 (mỗi số cách nhau 100 đơn vị).

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;
}
Thêm Bình Luận: