CSS: шрифти

  1. сімейства шрифтів
  2. стилі шрифтів

Дивіться також покажчик всіх прийомів роботи.

На цій сторінці:

сімейства шрифтів

Після кольору шрифт - можливо, найважливіша властивість сторінки. На цій сторінці я не буду демонструвати ніяких "трюків", але покажу ряд варіацій шрифтів, допустимих в CSS.

Оскільки не всі шрифти доступні на всіх комп'ютерах (існують тисячі шрифтів і більшість з них не безкоштовні), CSS передбачає резервну систему. Першим ви вказуєте шрифт, який хотіли б використовувати. За нею йдуть будь-які шрифти, які ви могли б використовувати, якщо перший зазначений шрифт недоступний. А закінчити список ви повинні типовим шрифтом, який має 5 видів: serif, sans-serif, monospace, cursive і fantasy.

Наступна таблиця показує приклади різних шрифтів (ваш браузер може не знати їх все) і ви можете побачити, що ваш браузер робить з кожним з п'яти типових шрифтів:

'sans-serif': звичайні шрифти без зарубок Arial, sans-serif З'їж ж ще цих м'яких французьких булок та випий чаю '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': декоративні шрифти, для назв і т 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 має набагато більше значень.

Навігація по сайту