Thuộc tính Font cho phép bạn thay đổi họ phông, độ đậm, kích cỡ và kiểu cách phông chữ của văn bản.
Lưu ý:
Các font chữ thì được xác định bởi tên của chúng trong CSS1. Lưu ý rằng nếu một trình duyệt không hỗ trợ thuộc tính font được chỉ định thì nó sẽ sử dụng font mặc định.
Các ví dụ:
- Thiết lập font chữ:
Trong css, có hai loại tên font chữ:
+ generic family - 1 nhóm các font tương tự nhau (như "Serif" hay "Monospace")
+ font family - tên font cụ thể (như "Times New Roman" hay "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana | "Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console | All monospace characters have the same width |
VD: p{font-family:"Times New Roman", Times, serif;}
- Thiết lập kiểu font:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
- Thiết lập cỡ font:
+ Thiết lập cỡ font bằng pixels:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
+ Thiết lập cỡ font bằng Em:
1em tương đương với cỡ font hiện hành. Cỡ font mặc định của trình duyệt là 16px. Vậy cỡ mặc định của 1em là 16px.
Có thể chuyển đổi qua em từ pixel qua công thức: pixels/16=em
VD: h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Có thể kết hợp % và em:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Thuộc tính Font:
Thuộc tính | Mô tả | Giá trị |
| font | Một thuộc tính nhỏ để thiết lập tất cả thuộc tính cho một phông trong một khai báo. | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
| font-family | Một danh sách ưu tiên của các họ phông cho một thành phần. | family-name generic-family |
| font-size | Thiết lập kích cỡ cho một phông chữ. | xx-small x-small small medium large x-large xx-large smaller larger length % |
| font-stretch | Những rút gọn hoặc mở rộng của phông. | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
| font-style | Thiết lập kiểu cách của phông. | normal italic oblique |
| font-variant | Hiển thị văn bản trong một phông chữ HOA NHỎ hoặc một phông chữ thường. | normal small-caps |
| font-weight | Thiết lập trọng lượng của phông. | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
