Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений (neighbor report)

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

Смотрите также указатель всех приёмов работы.

На этой странице:

Семейства шрифтов

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких "трюков", но покажу ряд вариаций шрифтов, допустимых в 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 имеет гораздо больше значений.

Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 17 Jan 2001;
Last updated Ср 15 ноя 2017 20:18:54

Языки

О переводах