[Tự Học CSS] Bài 4: Font

GiaLinhIT’s Blog xin chào các bạn, lâu nay vì quá bận nên mình tạm ngừng ở Bài 3: Background. Tiếp theo mình xin chia sẻ với các bạn về Font trong CSS.
Bộ thuộc tính Font là một trong những thuộc tính quan trong của CSS. Cách khai báo tương tự như các bộ thuộc tính trước. Font bao gồm: Font –family, font-style, font-size, font-variant, font-weight.

1. Font-family :

Dùng để xác định font chữ cho website.
Giá trị là tên font chữ tiếng anh.
Ví dụ : font-family :Arial, Verdana ;
Giá trị có thể có nhiều font ngăn cách nhau bằng dấu phẩy.
Tại sao bạn nên đặt nhiều font cho website ?
Bởi vì font của website phải tương thích với font trên máy của người xem website, nhưng bạn có chắc rằng khách xem website của bạn có đẩy đủ các loại font hay có font trùng với font của website bạn, vì vậy chúng ta nên đặt nhiều font.
Độ ưu tiên của font đặt sau thuộc tính sẽ ưu tiên từ trái qua phải.
Ví dụ : Định dạng cho trang web có chữ thiết kế giao diện web có thuộc tính  font-family : Arial, Vendana,  « Time New Roman » ;

Như ví dụ trên  thì nếu máy khách không có font Arial thì sẽ hiển thị theo font Vendana, còn nếu Vendana cũng không có sẽ hiển thị theo Time New Roman.
Chú ý : Những font chữ có dấu cách khi đặt làm giá trị sẽ phải đặt trong nháy kép .

2. Font – style :

Dùng để xác định kiểu chữ.
Các giá trị là : Normal ( bình thường), Italic (in nghiêng), Oblique (in xiên).
Ví dụ : Định dạng in nghiêng cho từ thiết kế giao diện web giá rẻ.

3. Font-size :

Dùng để xác định kích thước chữ.
Có giá trị là số, đơn vị thường dùng là px và em.
Ví dụ : Định dạng size cho chữ “thiet ke giao dien web” 45px.

4. Font – Variant

Dùng để xác định 1 số kiểu chữ như small-caps, normal.

5. Font-weight:

Dùng để xác định kiểu in đậm hay in thường cho thành phần nào đó.
Ví dụ: Định dạng chữ đậm cho chữ thiet ke giao dien web chuyen nghiep

6. Cách viết tắt của bộ thuộc tính font:

Tương tự như background thì font cũng có kiểu viết tắt:
Font: style variant weight size/line-height family

Bài tập thực hành:

Định dạng cho đoạn
văn như hình dưới biết: font chữ là Time New Roman, Cỡ chữ 20px, in đậm kiểu bold, căn giữa đoạn văn.

Mời các bạn đón đọc Bài 5: Text trong loạt bài Tự Học CSS

Chúc các bạn học tốt!