Справочник по CSS (ЦСС) и ШТМЛ
Что обозначает единица em, применяемая для задания размера шрифта?
Наряду с пикселами, пунктами и процентами находит свое применение единица em, которая обычно используется для определения размера шрифта. Давайте разбираться, что это такое.
Единица em отталкивается от размера основного шрифта объекта. Предположим, что для всей страницы мы установили шрифт размером 14 пунктов (пример 1), тогда единица 1em будет эквивалентна 14pt.
Пример 1. Основной контент
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Размер шрифта в pt и em</title>
<style type="text/CSS (ЦСС)">
BODY {
font-size: 14pt; /* Размер шрифта в пунктах */
}
h1 {
font-size: 1em; /* Размер шрифта в em */
}
</style>
</head>
<body>
<p>Шрифт размером 14 пунктов.</p>
<h1>Заголовок размером 1em.</h1>
</body>
</html>
В данном примере параметры основного контента определяются с помощью атрибута font-size, добавляемого к селектору BODY. Поскольку размер контента задан явно для всего объекта, то 1em равен 14pt, поэтому заголовок, заключенный в контейнере <H1> также будет выводиться размером 14 пунктов (рис. 1).
Рис. 1. контент, в котором используются разные единицы измерения
В том случае, когда размер контента напрямую не задан, браузер устанавливает значение размера самостоятельно. В каждом случае эта величина будет своя, например, для тега <H1> обычно используется 24pt, для <H2> ? 18pt, а для основного контента ? 12pt. При этом за 1em принимается размер, задаваемый браузером по умолчанию для основного контента. Как правило, браузеры исходно используют шрифт 12 пунктов. Следовательно, 2em эквивалентно 24pt, а 3em равно 36pt (пример 2).
Пример 2. Размер основного контента по умолчанию
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Размер шрифта в em</title>
<style type="text/CSS (ЦСС)">
h1 {
font-size: 2em; /* Размер шрифта в em */
}
</style>
</head>
<body>
<h1>Шрифт размером 2em.</h1>
<p>Основной контент.</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Заголовок размером 2em
Допустимо задавать не только целые числа, но и дробные, например 0.5em. Вместо em можно использовать процентную запись, при этом 1em равен 100%.