Дивіться також покажчик всіх прийомів роботи.
На цій сторінці:
сімейства шрифтів
Після кольору шрифт - можливо, найважливіша властивість сторінки. На цій сторінці я не буду демонструвати ніяких "трюків", але покажу ряд варіацій шрифтів, допустимих в 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 З'їж ж ще цих м'яких французьких булок та випий чаю
стилі шрифтів
Більшість шрифтів мають різноманітні стилі в межах одного і того ж шрифтового сімейства. Зазвичай це жирний стиль (bold) або курсив (italic), часто зустрічається також стиль "жирний курсив" (bold italic), рідше - капітель (малі прописні букви - small-caps), а в ряді випадків - екстра-світлі / екстра жирні або розтягнуті / стислі версії.
У таблиці нижче наведено кілька різних стилів. Багато з рядків будуть виглядати однаково, якщо у вас немає великої колекції шрифтів.
правило serif sans-serif Стилі font-style: normal З'їж ж ... З'їж ж ... font-style: italic З'їж ж ... З'їж ж ... font-style: oblique З'їж ж ... З'їж ж ... Насиченість шрифту font-weight: 100 З'їж ж ... З'їж ж ... font-weight: 200 З'їж ж ... З'їж ж ... font-weight: 300 З'їж ж ... З'їж ж ... font-weight: normal З'їж ж ... З'їж ж ... font-weight: 500 З'їж ж ... З'їж ж ... font-weight: 600 З'їж ж ... З'їж ж ... font-weight: bold З'їж ж ... З'їж ж ... font-weight: 800 З'їж ж ... З'їж ж ... font-weight: 900 З'їж ж ... З'їж ж ... Варіанти font-variant: normal З'їж ж ... З'їж ж ... font-variant: small-caps З'їж ж ... З'їж ж ... Розтягування font-stretch: ultra-condensed З'їж ж ... З'їж ж ... font-stretch: extra- condensed З'їж ж ... З'їж ж ... font-stretch: condensed З'їж ж ... З'їж ж ... font-stretch: semi-condensed З'їж ж ... З'їж ж ... font-stretch: normal З'їж ж ... З'їж ж ... font-stretch: semi-expanded З'їж ж ... З'їж ж ... font-stretch: expanded З'їж ж ... З'їж ж ... font-stretch: extra-expanded З'їж ж ... З'їж ж ... font-stretch: ultra-expanded З'їж ж ... З'їж ж ...
Модуль "Шрифти" в CSS має більше властивостей для вказівки спеціальних стилів (для шрифтів, які підтримують кілька варіантів), зокрема, властивість font-variant має набагато більше значень.
