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

CSS свойства

Определение и применение

CSS свойство font-size задает размер шрифта элемента.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
font-size1.01.07.01.05.512.0

CSS синтаксис:

font-size:"medium | small | x-small | xx-small | smaller | large | x-large | xx-large |  larger | length | initial | inherit";

JavaScript синтаксис:

object.style.fontSize = "150%"

Значения свойства

ЗначениеОписание
mediumУстанавливает размер шрифта среднего размера. Это значение по умолчанию.
smallУстанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-smallЗадает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-smallЗадает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smallerУстанавливает размер шрифта меньшего размера, чем у родительского элемента.
largeУстанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-largeУстанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-largeЗадает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
largerУстанавливает размер шрифта большего размера, чем у родительского элемента.
lengthУстанавливает размер шрифта фиксированного размера (в единицах измерения CSS - px, em, cm и др.).
%Задает размер шрифта в процентах от размера шрифта родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-size.</title>
<style> 
.test {
font-size : 180%; /* устанавливаем размер шрифта 180% от размера шрифта родительского элемента */
}
.test2 {
font-size : 1.5em; /* устанавливаем размер шрифта 1.5em. */
}
.test3 {
font-size : 16px; /* устанавливаем размер шрифта 16px. */
}
</style>
</head>
	<body>
		<p class = "test">Параграф с размером шрифта в процентах от размера шрифта родительского элемента (180%).</p>
		<p class = "test2">Параграф с размером шрифта 1.5em.</p>
		<p class = "test3">Параграф с размером шрифта 16px.</p>
	</body>
</html>
Пример использования свойства CSS font-size.
Пример использования свойства CSS font-size (установка размера шрифта).
CSS свойства