Для установки размера шрифта используется свойство font-size:
div{
font-size: 18px;
}
В данном случае высота шрифта составит 18 пикселей. Пиксели представляют наиболее часто используемые единицы измерения. Чтобы задать значение в пикселях, после самого значения идет сокращение "px".
Если к тексту явным образом не применяется высота шрифта, то используются значения браузера по умолчанию. Например, для простого текста в параграфах это 16 пикселей. Это базовый стиль текста.
Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h1 это 32 пикселя, для заголовков h2 - 24 пикселя и т..д.
Для измерения шрифта также можно использовать самые разные единицы измерения.
В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:
medium: базовый размер шрифта браузера (16 пикселей)
small: 13 пикселей
x-small: 10 пикселей
xx-small: 9 пикселей
large: 18 пикселей
x-large: 24 пикселя
xx-large: 32 пикселя
Например:
font-size: x-large;
Проценты позволяют задать значение относительно базового или унаследованного шрифта. Например:
font-size: 150%;
В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px
Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты в CSS3</title>
<style>
div {font-size: 10px;}
p {font-size: 150%;}
</style>
</head>
<body>
<div>
<p>Однажды в студеную зимнюю пору</p>
</div>
</body>
</html>
Здесь элемент p наследует от контейнера - блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для параграфа.
Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.
Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100%, .5em равно 50% и т.д.