Шрифт в CSS. Свойство font

Для задания шрифтов в CSS существует свойство font, при помощи которого можно задать гарнитуру, стиль шрифта, размеры и толщину букв.

Font-family

Свойство font-family задаёт гарнитуру шрифта. Здесь под термином гарнитура будем понимать объединение одинаковых по характеру рисунка шрифтов. Существует несколько гарнитур:

Serif - шрифты с засечками, Times New Roman и сходные с ним;
Sans-serif - шрифты рубленные, без засечек. Самый известный представитель этой группы шрифтов - Arial;
Monospace - моноширинные шрифты, с одинаковым расстоянием между буквами, например Courier New;
Cursive - курсивные шрифты, Adventure например;
Fantasy - декоративные шрифты, например Barocco Floral Initial.

В качестве значения свойства font-family указывается как название шрифта, так и название гарнитуры в целом. Наиболее приемлемым указанием значения является следующего вида запись:

p {
font-family:Courier New, monospace;
}

Если к абзацу применить данную таблицу стилей, шрифт текста будет Courier New, если же на компьютере посетителя веб-страницы такого шрифта не окажется, вместо него будет использован любой шрифт семейства monospace, имеющийся на компьютере этого пользователя.

Font-style

Это свойство задаёт стиль шрифта. Допускается использовать несколько значений:

normal - обычный, используется по умолчанию;
oblique - наклонный;
italic - курсив.

Font-variant

С помощью данного свойства можно задавать вариант написания букв из двух возможных:

normal - нормальный, используется по умолчанию;
small-caps - малые прописные буквы.

Пример использования:

h1, h2, h3, h4, h5, h6 {
font-variant:small-caps;
}

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

Font-weight

При помощи свойства font-weight задаётся толщина букв в шрифте. Может иметь 9 значений: 100, 200, 300, 400, 500, 600, 700, 800, 900. Также значение может быть задано в виде следующих ключевых слов: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому) и lighter (менее жирный по отношению к базовому). Базовые шрифты - унаследованные от элемента-предка. Числовой эквивалент значения normal - 400, bold - 700. Пример использования:

p{
font-weight:700;
}
p var {
font-style:normal;
font-weight:lighter;
}

Font-size

Свойство font-size позволяет задавать размер шрифта. Сделать это можно несколькими способами.

Задание размера шрифта по ключевым словам. Размер шрифта можно задать при помощи 7 ключевых слов:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
Размер текста, заданного при помощи ключевых слов зависит от браузера и операционной системы. Из этого следует, что при выборе данного способа задания размера в разных браузерах и устройствах отображаться текст будет по-разному. Также можно использовать ещё 2 ключевых слова для задания размера текста. Это smaller - шрифт уменьшается на один размер относительно родительского элемента и larger - шрифт увеличивается на один размер относительно родительского элемента. Например:

p {
font-size:medium;
}
cite {
font-size:110%;
}

В этом случае размер цитат в абзацах будет 110% от основного текста.
Задание размера текста при помощи любых единиц измерения, будь то относительные единицы (пиксели) или абсолютные (сантиметры, пункты).

Сокращённая запись свойства font

Свойство font можно задать в краткой форме, например запись вида:

p {
font-style:italic;
font-family:Arial, sans-serif;
font-variant:small-caps;
font-size:14pt;
}

Можно записать так:

p {
font:italic, small-caps 14pt Arial, sans-serif;
}

В сокращённой записи свойства font обязательно должен быть выполнен следующий порядок:

Сначала идёт запись свойств font-style, font-variant и font-weight. Каждое из этих свойств можно пропустить и не записывать;
После этого обязательно указыватся размер шрифта, font-size;
Последним делом указывается значение свойства font-family.

2012 год.

<<Предыдущая | В раздел | Следующая>>