Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких "трюков", но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
| 'sans-serif': обычные шрифты без засечек | ||
|---|---|---|
Arial, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Helvetica, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Verdana, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Trebuchet MS, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Gill Sans, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Noto Sans, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Arial Narrow, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю | |
| 'serif': обычные шрифты с засечками | ||
Times, Times New Roman, serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Georgia, serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Palatino, URW Palladio L, serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Bookman, URW Bookman L, serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
New Century Schoolbook, TeX Gyre Schola, serif
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
serif
| Съешь же ещё этих мягких французских булок да выпей чаю | |
| 'monospace': шрифты фиксированной ширины | ||
Andale Mono, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Courier New, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Courier, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
FreeMono, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
DejaVu Sans Mono, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
monospace
| Съешь же ещё этих мягких французских булок да выпей чаю | |
| 'cursive': шрифты, имитирующие почерк | ||
Comic Sans MS, Comic Sans, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Bradley Hand, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Brush Script MT, Brush Script Std, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Snell Roundhand, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
URW Chancery L, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
cursive
| Съешь же ещё этих мягких французских булок да выпей чаю | |
| 'fantasy': декоративные шрифты, для названий и т.д.. | ||
Impact, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Luminari, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Marker Felt, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
Trattatello, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю | 
|
fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю | |
