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

Линия основания Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство font-size CSS устанавливает размер шрифта. Изменение размера шрифта также обновляет размеры шрифтовых единиц, относящихся к размеру шрифта, таких как em, ex, и так далее.

Попробуйте

Синтаксис

/* <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.

Описание

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

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

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

Пиксели

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

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

Примечание: Определение размеров шрифтов в px недоступно, потому что пользователь не может изменить размер шрифта в некоторых браузерах. Например, пользователи с ограниченными возможностями могут захотеть сделать размер шрифта намного больше, чем размер, выбранный веб-дизайнером. Избегайте их использования для размеров шрифтов, если вы хотите создать дизайн, обеспечивающий инклюзивность.

Эмы

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

p {
  font-size: 2em;
}

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

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

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

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

Например, предположим, что font-size элемента <body> страницы равен 16px. Если требуемый размер шрифта равен 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. Это потому, что  внутреннего  имеет значение 1.6em, что относится к его родительскому элементу, а тот, в свою очередь, относится к своему родительскому элементу. Это часто называют наложением.

Ремы

Значения 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).

Экс

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

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

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

Начальное значение	`medium`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Проценты	относятся к размеру шрифта родительского элемента
Вычисленное значение	как указано, но с относительными размерами, преобразованными в абсолютные
Тип анимации	длина

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

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

<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>

Результат

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

Спецификация
CSS Fonts Module Level 4 # font-size-prop

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-size`	1	12	1	7	1	18	4	10.1	1	1.0	4.4
`math`	109	109	117	95	Нет	109	117	74	Нет	21.0	109
`rem_values`	31	12	31 ["Перед Firefox 57, анимации, использующие единицы em, не затронуты изменениями в `font-size` родительского элемента анимируемого элемента (bug 1254424).", "Перед Firefox 57, некоторые настройки языка унаследованные `font-size` были меньше ожидаемого (bug 1391341)."]	28	7	42	31	28	7	4.0	42
`xxx-large`	79	79	70	66	16.4	79	79	57	16.4	12.0	79

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size