свойство font-sizeCSS3-генератор ☛

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

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

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

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

Рис. 1. Размер шрифта

Краткая информация

Значение по умолчанию	medium
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис ?

font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS	xx-small	x-small	small	medium	large	x-large	xx-large	Нет
HTML	1	Нет	2	3	4	5	6	7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h1 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
    font-size: 250%; /* Размер шрифта в процентах */
   }
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt; /* Размер шрифта в пунктах */
   }
  </style>
 </head>
 <body>
  <h1>Амазонская низменность</h1>
  <p>Для гостей открываются погреба Прибалатонских
  винодельческих хозяйств, известных отличными сортами
  вин "Олазрислинг" и "Сюркебарат".</p>
 </body>
</html>

Объектная модель

Объект.style.fontSize

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
5.5	1	7	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также