CÁC HỌ FONT
Sau màu sắc, font có lẽ là thuộc tính cơ bản nhất của một trang. Trên trang này, tôi sẽ không chỉ ra bất kỳ “thủ thuật" nào, nhưng tôi sẽ chỉ ra các loại font khác nhau mà CSS cho phép.
Bởi không phải tất cả các font đều sẵn có trong tất cả các máy tính (có hàng ngàn loại font, và phần lớn đều không miễn phí), CSS cung cấp một hệ thống dự trữ. Đầu tiên, bạn liệt kê font mà bạn muốn, sau đó bất kỳ font nào có thể thay thế cho font đầu tiên nếu nó không có sẵn, và bạn phải kết thúc danh sách với một generic font, trong đó có năm loại font: serif, sans-serif, monospace, cursive và fantasy.
Bảng sau là ví dụ của các font khác nhau (trình duyệt của bạn có thể không biết tất cả các font này) và bạn có thể thấy những gì trình duyệt của bạn làm với một trong năm generic font:
| 'sans-serif': normal fonts without serifs | |
|---|---|
Arial, sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica, sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans, sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida, sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica Narrow, sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
sans-serif | The Quick Brown Fox Jumps Over The Lazy Dog |
| 'serif': normal fonts with serifs | |
Times, serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman, serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Palatino, serif | The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman, serif | The Quick Brown Fox Jumps Over The Lazy Dog |
New Century Schoolbook, serif | The Quick Brown Fox Jumps Over The Lazy Dog |
serif | The Quick Brown Fox Jumps Over The Lazy Dog |
| 'monospace': fixed-width fonts | |
Andale Mono, monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New, monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
Courier, monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
Lucidatypewriter, monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
Fixed, monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
monospace | The Quick Brown Fox Jumps Over The Lazy Dog |
| 'cursive': fonts that emulate handwriting | |
Comic Sans, Comic Sans MS, cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
Zapf Chancery, cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
Coronetscript, cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
Florence, cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
Parkavenue, cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
cursive | The Quick Brown Fox Jumps Over The Lazy Dog |
| 'fantasy': decorative fonts, for titles, etc. | |
Impact, fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
Arnoldboecklin, fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
Oldtown, fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
Blippo, fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
Brushstroke, fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
fantasy | The Quick Brown Fox Jumps Over The Lazy Dog |
CÁC KIỂU FONT
Đa phần các font có những kiểu khác nhau trong cùng một họ, điển hình là kiểu đậm và kiểu nghiêng, còn thường có kiểu đậm nghiêng, ít phổ biến hơn là chữ hoa nhỏ và trong một vài trường hợp là kiểu rất đậm/rất nhạt hay kéo giãn/sít lại.
Bảng dưới là một số kiểu dáng khác nhau. Trừ khi bạn có một bộ sưu tập rất nhiều font, thì nhiều dòng trong đó sẽ giống nhau.
| rule | serif | sans-serif | |||
|---|---|---|---|---|---|
| Styles | |||||
font-style: normal | The Quick… | The Quick… | |||
font-style: italic | The Quick… | The Quick… | |||
font-style: oblique | The Quick… | The Quick… | |||
| Weights | |||||
font-weight: 100 | The Quick… | The Quick… | |||
font-weight: 200 | The Quick… | The Quick… | |||
font-weight: 300 | The Quick… | The Quick… | |||
font-weight: normal | The Quick… | The Quick… | |||
font-weight: 500 | The Quick… | The Quick… | |||
font-weight: 600 | The Quick… | The Quick… | |||
font-weight: bold | The Quick… | The Quick… | |||
font-weight: 800 | The Quick… | The Quick… | |||
font-weight: 900 | The Quick… | The Quick… | |||
| Variants | |||||
font-variant: normal | The Quick… | The Quick… | |||
font-variant: small-caps | The Quick… | The Quick… | |||
| Stretch | |||||
font-stretch: ultra-condensed | The Quick… | The Quick… | |||
font-stretch: extra-condensed | The Quick… | The Quick… | |||
font-stretch: condensed | The Quick… | The Quick… | |||
font-stretch: semi-condensed | The Quick… | The Quick… | |||
font-stretch: normal | The Quick… | The Quick… | |||
font-stretch: semi-expanded | The Quick… | The Quick… | |||
font-stretch: expanded | The Quick… | The Quick… | |||
font-stretch: extra-expanded | The Quick… | The Quick… | |||
font-stretch: ultra-expanded | The Quick… | The Quick… | |||
Trong CSS3, có một kiểu font sẵn có hơn: 'font-effect' khiến ký tự trông sâu hay nổi.
