Home » CSS » [CSS Tutorial] Bài 5: Font

[CSS Tutorial] Bài 5: Font

This entry is part 5 of 9 in the series CSS

font-family:

Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Khi đó, font đầu tiên trong danh sách sẽ được ưu tiên dùng để hiện trang web. Nếu font thứ nhất không có trên máy tính người dùng thì font thứ hai sẽ được dùng. Tiếp tục, cho đến khi nào tìm được font có trên máy tính người dùng.

Có hai loại tên font được dùng để chỉ định trong font-family:

  • family-names: tên cụ thể của một font, ví dụ: Arial, Time New Roman,….
  • generic families: tên một họ  gồm nhiều font , ví dụ : serif , sans-serif,…

Xem thêm về sự khác nhau giữa serif và sans-serif.

Ví dụ: Sử dụng lần lượt các font Times New Roman, Tohama, sans-serif cho thẻ body. Ta có, CSS viết như sau:

Giải thích: Trình duyệt ưu tiên dùng font Time New Roman. Nếu máy tính người dùng không có font Time New Roman thì dùng đến font Tohama. Nếu không có font Tohama thì dùng bất kì font nào thuộc họ sans-serif.

Chú ý: Đối với các tên font có khoảng trắng như Times New Roman cần được đặt trong dấu ngoặc kép.

font-style:

Thuộc tính font-style quy định các kiểu định dang cho chữ như normal (in thường) , italic (in nghiêng) hoặc oblique (in xiêng).

Ví dụ: Áp dụng in nghiêng cho các thẻ h1,h2,h3. Ta có CSS viết như sau:

font-variant:

Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.

Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.

Có 3 giá trị cho thuộc tính font-variant là:

  • normal: bình thường
  • small-caps: chuyển chữ sang small-caps.
  • inherit: kết thừa định dạng từ phần tử cha.

Ví dụ: Sử dụng giá trị inherit cho thuộc tính font-variant.

Đầu tiên, tạo trang html có nội dung:

Viết CSS như sau:

Kết quả thu được:

CSS-Tutorial-Bai-5-Font-Anh-01

Nhận xét: thẻ h1 khai báo là inherit nên nó kế thừa giá trị small-caps từ thẻ body bao quanh nó.

font-weight:

Thuộc tính font-weight giúp ta thể hiện mức độ in đậm chữ.

Các giá trị mà thuộc tính font-weight có thể nhận:

  • normal: in thường. Đây là giá trị mật định
  • bold: im đậm.
  • bolder: im đậm hơn.
  • lighter: mờ hơn bình thường.
  • Các giá trị số: 100, 200, 300, 400, 500, 600, 700, 800, 900. Các con số này định nghĩ độ dày hay mỏng của chữ.

Ví dụ: Dùng CSS định dạng cho các thẻ p in đậm.

font-size:

Thuộc tính font-size giúp ta định dạng kích thước chữ.

Để định dạng font chữ phù hợp, ta cần biết các đơn vị định dạng trong CSS.

ĐƠN VỊ MÔ TẢ
mm Milimeter
cm centimeter
in inch
% phần trăm
em 1 em tương đương kích thước font hiện hành, Nếu font hiện hành có kích cỡ 14px thì 1 em  14px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web thay đổi theo kích thước màn hình (responsive)
ex 1ex bằng chiều cao của chữ in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times New Roman và font Tohama là khác nhau.
pt Point (1pt = 1/72 inch)
pc Pica (1pc = 12 pt)
px Pixels (1px = 1 điểm ảnh trên màn hình máy tính)

Trong bảng trên, các đơn vị thường dùng nhất là em và px.

Ví dụ: Định dạng thẻ p có chữ có kích thước là 14px.

Ví dụ:  Ta tìm hiểu về đơn vị em. Giả sử, kích thước font chữ trang web là 14px. Kích thước font của thẻ h1 là 3em = 3×14 = 42px. Kích thước font chữ thẻ h2 là 2em = 2×14 = 28px.

Nhận xét: Trong ví dụ trên khi sử dụng đơn vị em, ta chỉ việc thay đổi kích thước chữ của thẻ body, khi đó thẻ h1 và thẻ h2 sẽ thay đổi tương ứng theo tỉ lệ đã đặt trước. Điều này cực kì hữu ích trong thiết kế giao diện responsive.

Rút gọn các thuộc tính font:

Tương tự như background, CSS cũng hỗ trợ rút gọn các thuộc tính của font.

Ví dụ: Ta khai báo định dạng thẻ h1 như sau:

Ta có thể rút gọn thành:

 

Series Navigation<< [CSS Tutorial] Bài 4: Background[CSS Tutorial] Bài 6: Text >>
Share
Share
Free WordPress Themes - Download High-quality Templates