Каскадные таблицы стилей
CSS советы & приемы

(Эта страничка использует каскадные таблицы стилей CSS)

Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C https://www.w3.org/Style/Examples/007/fonts.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец - разработчик Speed Tests. Все переводы автора: en, ru, uk
Локальная версия: https://www.indeep76.com/Style/Example007/fonts.html

Группы шрифтов

Стили шрифтов

Группы шрифтов

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

Так как не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и многие не бесплатны), CSS обеспечивает резервную систему. Вы перечисляете шрифты, которые вы хотите найти прежде всего, затем любые шрифты, которые вы будете использовать, если не можете найти необходимые, и закончите список типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:

'sans-serif': обычный шрифт без засечек
Arial, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Helvetica, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Gill Sans, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Lucida, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Helvetica Narrow, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
'serif': обычный шрифт с засечками
Times, serif Съешь же ещё этих мягких французских булок да выпей чаю
Times New Roman, serif Съешь же ещё этих мягких французских булок да выпей чаю
Palatino, serif Съешь же ещё этих мягких французских булок да выпей чаю
Bookman, serif Съешь же ещё этих мягких французских булок да выпей чаю
New Century Schoolbook, serif Съешь же ещё этих мягких французских булок да выпей чаю
serif Съешь же ещё этих мягких французских булок да выпей чаю
'monospace': шрифт фиксированной ширины
Andale Mono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier New, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Lucidatypewriter, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Fixed, monospace Съешь же ещё этих мягких французских булок да выпей чаю
monospace Съешь же ещё этих мягких французских булок да выпей чаю
'cursive': шрифт, имитирующий почерк
Comic Sans, Comic Sans MS, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Zapf Chancery, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Coronetscript, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Florence, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Parkavenue, cursive Съешь же ещё этих мягких французских булок да выпей чаю
cursive Съешь же ещё этих мягких французских булок да выпей чаю
'fantasy': декоративный шрифт, для заглавий и т.д.
Impact, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Arnoldboecklin, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Oldtown, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Blippo, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Brushstroke, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
fantasy Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Многие шрифты имеют различную систему в пределах одной группы, обычно жирный и итальянский, часто также жирный итальянский стиль, менее часто прописные буквы и в нескольких случаях экстра-светлые/экстра-жирные или растянутые/сжатые версии.

Таблица, данная ниже, показывает несколько различных стилей. Если у вас очень большая коллекция шрифтов, многие ряды могут повторяться.

правило serif sans-serif
Стили
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Вес
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…
Варианты
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Растяжимость
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…

В CSS3 есть еще один стиль: 'font-effect', который делает буквы рельефными.

CSS Valid CSS!Valid HTML 4.0!