Как сделать сайтУроки CSS → Урок 6. Свойства - шрифты

CSS - Урок 6. Свойства - шрифты

Для задания параметров шрифтов в CSS используется свойство font.

Font-family

Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:

  • Serif - шрифты с засечками, например, Times New Roman.

  • Sans-serif - шрифты рубленные, без засечек, например, Arial.

  • Monospace - моноширинные шрифты, например, Courier New.

  • Cursive - курсивные шрифты, например, Calisto MT.

  • Fantasy - декоративные шрифты, например, Torhok.

Вот примеры написания разными группами шрифтов:

css шрифты

Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:
body{ font-family: Verdana, sans-serif; }
Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного.

Вообще, можно указать несколько шрифтов через запятую, в порядке убывания приоритета.

Font-style

Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:
<html> <head> <title>css шрифты</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p id="sn">Текст в параграфе с идентификатором sn.</p> <p id="so">Текст в параграфе с идентификатором so.</p> <p id="si">Текст в параграфе с идентификатором si.</p> </body> </html>
Зададим в таблице стилей шрифт для всех параграфов:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; }
Сейчас наша страница в браузере выглядет так:
font css


Теперь давайте зададим каждому параграфу свой стиль:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#sn{ font-style:normal; } p#so{ font-style:oblique; } p#si{ font-style:italic; }
Теперь наша страница выглядет так:
свойство css - font


Вы спросите, чем отличается наклонный стиль от курсивного? Дело в том, что различные шрифты включают в себя различные варианты начертания (bold, italic, regular и другие). Но, если в какой-либо шрифт не включен вариант italic, то он имитируется простым наклоном букв, что и соответствует значению oblique.

По умолчанию используется стиль normal.

Font-variant

Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. Давайте изменим таблицу стилей предыдущего примера на такую:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-variant:small-caps; }
Теперь наша страница выглядет так:


Font-weight

Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).

При этом значению normal соответствует числовое значение 400, а значению bold - 700. Давайте зададим это свойство нашему второму параграфу:
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-weight:bold; }
Теперь наша страница выглядет так:


Font-size

Это свойство задает размер шрифта. Задавать размер в css можно тремя способами:
  • с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large),

  • с помощью относительных единиц (% и em),

  • с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).

Использовать ключевые слова пока не рекомендуется, так как разные браузеры по-разному их отображают.

С помощью относительных единиц задаются размеры относительно элемента-предка.

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

Существует три относительных единицы измерения:
  • px - равен одной точке на экране, называемой пикселом.

  • em - равен высоте шрифта, используемого в данном элементе.

  • ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе.

И пять абсолютных единиц измерения:
  • in - равен 1 дюйму (2,54 см).

  • pt - равен 1/72 дюйма.

  • pc - равен 1/6 дюйма.

  • mm - равен 1 миллиметру.

  • sm - равен 1 сантиметру.

Как и понятно из названия, абсолютные единицы имеют фиксированный размер, а относительные устанавливают размер относительно какой-то другой единицы. Одни единицы измерения "перекочевали" из полиграфии, другие из реального мира. Но далеко не все из них подходят для web.

У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом.

Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.

Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов):
p#sn, p#so, p#si{ font-family: Verdana, sans-serif; font-size:12px; } p#so{ font-size:1.2em; } p#si{ font-size:0.8em; }
Обратите внимание, у величины em в качестве разделителя выступает точка (.), а не запятая. Теперь наша страница выглядит так:


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

В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. Давайте зададим нашим параграфам следующие свойства:
p#sn, p#so, p#si{ font:italic 12px Verdana, sans-serif; } p#so{ font-size:1.2em; } p#si{ font-style:normal; }
Таким образом, сначала сокращенной записью мы задали значения свойства font для всех параграфов, а затем задали отличия для второго и третьего параграфов. Теперь наша страница выглядит так:


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



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.