Размер шрифта в CSS

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать шрифт в CSS. В данной статье я бы хотел рассказать, как задать размер шрифта в CSS. Если размер шрифта не задавать, то браузер будет отображать текст стандартным размером шрифта (каким — узнаете ниже). Размер шрифта задаётся с помощью свойства font-size. Существуют следующие способы задания размера шрифта:

large, medium, small — с помощью ключевых слов
px — в пикселях
pt — в пунктах
% — в процентах
em — в единицах

Браузер по умолчанию отображает размер шрифта следующим образом:

medium
16px
12pt
100%
1em

Т.е все эти 5 значений равны между собой. Убедитесь в этом сами, задав размер шрифта любым из этих 5 способов.

Давайте создадим тестовую html-страницу.

<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Допустим мы хотим увеличить размер шрифта и задать его в процентах. Для этого в файле стилей style.css необходимо написать:

p {
font-size:120%;
}

Обновите страницу и вы увидите, что базовый размер шрифта увеличился. Если вы хотите уменьшить размер шрифта, то соответственно, нужно указывать число, меньшее базового размера. Давайте зададим размер шрифта в единицах. Данная единица измерения пришла из книгопечатания (1em = 100%):

p {
font-size:0.7em;
}

Вы увидите, что шрифт уменьшился. Как и проценты, данная единица хорошо масштабируется.

На своих сайтах я обычно задаю размер в пикселях (px). Раньше считалось, что браузеры плохо масштабируют пиксели. На данный момент все современные браузеры очень хорошо справляются с этой задачей.

В пунктах обычно размер не задают (очень редко где встречал, да и смысла в этом нет, когда есть другие хорошие способы). Один пункт равен 0,35 миллиметра.
Ключевые слова large, medium, small встречаются крайне редко. Если нужно ещё меньше, чем small, то можно писать x-small или xx-small (что ещё меньше). То же самое и для large.

Домашнее задание: создайте тестовую html-страницу и задайте размер шрифта с помощью всех 5 способов.

В данной статье вы узнали, как задать размер шрифта в CSS.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.