Свойство font-size - размер текста CSS

Свойство font-size CSS позволяет указывать размер текста . Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.

CSS

p {
  font-size: 20px;
}

font-size CSS может принимать в качестве значений ключевые слова, единицы измерения или процентное соотношение. Важно отметить, что в рамках применения сокращенного свойства font, font-size является обязательным значением. Если его не указать, то вся строка кода будет игнорироваться.

Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.

Абсолютные ключи и значения

CSS

.element {
  font-size: small;
}
}

Свойство, которое устанавливает размер текста CSS, принимает следующие ключевые слова:

• xx-small;
• x-small;
• small;
• medium;
• large;
• x-large;
• xx-large.

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

Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

Относительные ключевые обозначения

CSS

.element {
  font-size: larger;
}

• larger;
• smaller.

Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

Процентные обозначения

CSS

.element {
  font-size: 110%;
}

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.

Единица измерения em

CSS

.element {
  font-size: 2em;
}

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

HTML

<div class="container">
  <h2>Заголовок</h2>
  <p>Какой-нибудь текст</p>
</div>

CSS

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Единица измерения rem

Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).

CSS

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

Единица измерения ex

CSS

.element {
  font-size: 20ex;
}

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.

Единицы изменения viewport (окно просмотра)

CSS

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}
.

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

• 1vw = 1% от ширины окна просмотра;
• 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

CSS

.element {
  font-size: 100vh;
}
}

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh - 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

Эти единицы измерения поддерживаются следующими браузерами:

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Единица измерения ch

Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Эта единица измерения поддерживается следующими браузерами:

Валентин Сейидовавтор-переводчик статьи «Font-size»