Свойство CSS `font-size`

Свойство font-size CSS задаёт размер шрифта. При изменении размера шрифта также обновляются значения единиц <length>, относительных к размеру шрифта, таких как em, ex и т. д.

Попробуйте

font-size: 1.2rem;

font-size: x-small;

font-size: smaller;

font-size: 12px;

font-size: 80%;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

Синтаксис

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* math value */
font-size: math;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

Значения

Для этого свойства задаётся одно из следующих значений:

xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

Ключевые слова абсолютного размера, основанные на размере шрифта по умолчанию, заданном пользователем (это medium).

larger, smaller

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

<length>

Положительное значение <length>. Для большинства единиц, относительных к размеру шрифта (например, em и ex), размер шрифта задаётся относительно размера шрифта родительского элемента.

Для единиц, относительных к размеру шрифта и основанных на корневом элементе (например, rem), размер шрифта задаётся относительно размера шрифта элемента <html> (корневого).

<percentage>

Положительное значение <percentage> относительно размера шрифта родительского элемента.

Примечание: Для максимальной доступности обычно лучше использовать значения, относительные к размеру шрифта по умолчанию, заданному пользователем.

math

При вычислении значения свойства font-size для математических элементов применяются правила масштабирования относительно font-size содержащего родительского элемента. Подробнее см. свойство math-depth.

Описание

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

Ключевые слова

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

Пиксели

Задание размера шрифта в пикселях (px) — хороший выбор, когда требуется точность до пикселя. Значение px является статическим. Этот независимый от ОС и кроссбраузерный способ буквально указывает браузерам отображать буквы высотой ровно в заданное количество пикселей. Результаты могут немного различаться в разных браузерах, поскольку для достижения похожего эффекта они могут использовать разные алгоритмы.

Параметры размера шрифта также можно комбинировать. Например, если для родительского элемента задано 16px, а для его дочернего элемента — larger, дочерний элемент будет отображаться на странице крупнее родительского.

Единицы em

Значение em задаёт динамический, или вычисляемый, размер шрифта (исторически единица em была производной от ширины заглавной буквы «M» в данном шрифте). Числовое значение выступает множителем свойства font-size элемента, для которого оно используется. Рассмотрим следующий пример:

p {
  font-size: 2em;
}

В этом случае размер шрифта элементов <p> будет вдвое больше вычисленного значения font-size, унаследованного элементами <p>. Соответственно, значение font-size, равное 1em, соответствует вычисленному значению font-size элемента, для которого оно используется.

Если свойство font-size не задано ни для одного из предков <p>, то 1em будет равно значению font-size браузера по умолчанию, обычно 16px. Таким образом, по умолчанию 1em эквивалентно 16px, а 2em эквивалентно 32px. Например, если задать font-size со значением 20px для элемента <body>, то 1em для элементов <p> будет эквивалентно 20px, а 2em будет эквивалентно 40px.

Чтобы вычислить эквивалент em для нужного значения в пикселях, можно воспользоваться следующей формулой:

em = desired element pixel value / parent element font-size in pixels

Например, предположим, что для <body> страницы задано значение 16px свойства font-size. Если нужный размер шрифта — 12px, следует указать 0.75em (поскольку 12/16 = 0,75). Аналогично, если нужен размер шрифта 10px, укажите 0.625em (10/16 = 0,625); для 22px укажите 1.375em (22/16).

Единица em очень полезна в CSS, поскольку автоматически подстраивает свою длину относительно выбранного читателем шрифта.

Важно помнить: значения в em накапливаются. Рассмотрим следующий HTML и CSS:

html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}

<div>
  <span>Outer <span>inner</span> outer</span>
</div>

Результат:

Если предположить, что размер font-size по умолчанию в браузере равен 16px, слово «outer» будет отображаться размером 25,6px, а слово «inner» — 40,96px. Это происходит потому, что значение font-size, равное 1.6em, у внутреннего элемента <span> задаётся относительно font-size его родителя, которое, в свою очередь, зависит от font-size родительского элемента. Это часто называют накоплением.

Единицы rem

Значения rem были придуманы, чтобы избежать проблемы накопления. Значения rem задаются относительно корневого элемента html, а не родительского элемента. Иными словами, они позволяют задать размер шрифта относительно корневого элемента, независимо от размера родителя, устраняя тем самым накопление.

Приведённый ниже CSS почти идентичен предыдущему примеру. Единственное отличие — единица измерения заменена на rem.

html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

Затем применим этот CSS к тому же HTML, который выглядит так:

<span>Outer <span>inner</span> outer</span>

В этом примере слова «outer inner outer» будут отображаться размером 25,6px (если font-size браузера оставлен равным значению по умолчанию — 16px).

Единицы ex

Как и единица em, font-size элемента, заданный с помощью единицы ex, является вычисляемым или динамическим. Она работает точно так же, за исключением того, что при задании свойства font-size с помощью единиц ex единица font-size равна высоте строчной буквы (x-height) первого доступного шрифта, используемого на странице. Числовое значение умножается на унаследованное значение font-size элемента, а единица font-size накапливается относительно.

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

Формальное определение

Формальный синтаксис

font-size = 
  <absolute-size> |
  <relative-size> |
  <length-percentage [0,∞]> |
  math

<absolute-size> = 
  xx-small |
  x-small |
  small |
  medium |
  large |
  x-large |
  xx-large |
  xxx-large

<relative-size> = 
  larger |
  smaller

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Задание размеров шрифта

CSS

.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML

<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

Результат

Спецификации

Совместимость с браузерами

См. также

• font-size-adjust
• font-style
• font-weight
• math-depth
• math-style
• Атрибут SVG font-size
• Изучите основы оформления текста и шрифтов