Свойства шрифта: font-size

font-size

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 (1.7 или ранние) 5.5 7.0 1.0
Поддержка единицы Rem, версии браузеров 31.0 31.0 9, 101
11
28.0 7.0

1Версии Internet Explorer 9 и 10 только частично поддерживают единицу Rem.

Мобильные браузеры Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.0 1.0 1.0 (1) 6.0 6.0 1.0
Поддержка единицы Rem, версии браузеров 4.1 42 ? ? ? ?
Свойство
font-size — Размер шрифта
Наследование
Наследуется. Это значит что стили применённые к родительскому элементу передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
размер в абсолютных или относительных единицах | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit
Значение по умолчанию
medium
Правила записи
свойство: значение;
Примеры
font-size: 88%; <div style="font-size: 16px"><p style="font-size: 88%">Этот текст имеет размер 88% относительно родительского элемента</p></div>
font-size: 1,25em; <div style="font-size: 12px"><p style="font-size: 1,25em">Этот текст имеет размер 1,25em относительно родительского элемента</p></div>
font-size: 0,5rem; <html style="font-size: 24px"><p font-size: 0,5rem>Этот текст имеет размер 0,5rem от размера корневого элемента, а корневой элемент — это html</p></html>
font-size: vw; <p style="font-size: vw">Этот текст имеет размер 1% от размера окна браузера по ширине</p>
font-size: small; <p style="font-size: small">Этот текст имеет зарезервированный размер small</p>
font-size: medium; <p style="font-size: medium">Этот текст имеет зарезервированный размер medium, обычно он равен 16px</p>
font-size: smaller; <p>Это <span style="font-size: smaller">слово</span> будет меньше по размеру чем текст который его окружает</p>
font-size: larger; <p>Это <span style="font-size: larger">слово</span> будет больше по размеру чем текст который его окружает</p>
font-size: inherit; <div style="font-size: 12px;"><p style="font-size: inherit;">Это значит что размер шрифта унаследуется от родителя, в данном случае он будет равен 12px</p></div>
Как определяется размер относительных единиц?

Проценты % и единицы измерения em — это относительные единицы измерения, они высчитываются относительно родительского элемента. Например, есть такой фрагмент кода:

<p style="font-size: 24px">Этот текст имеет размер 24px, <span style="font-size: 0,5em">а этот текст имеет размер 12px</span></p>

Элемент p — это родительский элемент, а элемент span — это потомок, так как находится внутри p. Родительский элемент имеет размер 24px, а потомок 0,5em. Чтобы высчитать размер нужно вместо em подставить значение родителя и перемножить эти два числа: 0,5 * 24px = 12px.
Тоже самое и с процентами: если бы элемент span имел значение 50%, то размер шрифта также был бы равен 12px. Расчитываются проценты следующим образом: размер родителя 24px нужно умножить на размер потомка 50% и поделить на 100%, таким образом формула будет иметь вид:
24px * 50% / 100% = 12px.

Весь смысл относительных единиц измерения в том чтобы сохранить пропорции.

Заметка
При написании правила нужно быть внимательным,
пробел между числом и единицей измерения не допускается.
Поделиться