Главная css Размер шрифта

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

В CSS за установку размера шрифта отвечает CSS свойство font-size.

p {font-size: 10px; /*размер шрифта 10 пикселей для всех абзацев*/}

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения.
Абсолютные единицы не зависят от устройства вывода.
Относительные единицы определяют размер элемента относительно значения другого размера.

1. Абсолютные единицы измерения

Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом.
Самой распространенной единицей является пункт (pt), который используется для указания размера шрифта.

1 (Абсолютные единицы измерения)
<span style="font-size: 0.25in;">Размер 0.25 дюйма</span> 
<span style="font-size: 5mm;">Размер 5 миллиметров</span>
<span style="font-size: 1pc;">Размер 1 Пика</span>
<span style="font-size: 12pt;">Размер 12 пункта</span>
 
Размер 0.25 дюйма
Размер 5 миллиметров
Размер 1 Пика
Размер 12 пункта
(Для сравнения: Это размер 12 пикселей)

 

2. Относительные единицы измерения

Единица Описание
em Высота шрифта текущего элемента
ex Высота символа 'x'
px Пиксель
% Процент

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное (масштабирующее) соотношение между элементами.
Размер текста в относительных единицах привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

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

em - это масштабируемая единица.
em = текущему font-size.
Например, если font-size в документе: 12pt, то 1em = 12pt; 2em = 24pt; 0.5em = 6pt и т.д.

em - используенся для адаптации страниц для мобальных устройств.

Размер шрифта в em можно перевести из px (пикселей) по формуле:

em = пиксели/16

(30px/16=1.875em)

ex определяется как высота символа 'x' в нижнем регистре

px (пиксель) - элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Один пиксель равен 'одной точки' на экране компьютера (самый малый элемент разрешения экрана).
Размер пикселя зависит от разрешения устройства и его технических характеристик.

2 (Относительные единицы измерения)
<body style="font-size: 16px;"> <!-- это 1em, наши 100% -->
  <span style="font-size: 1em;">Размер 1em</span> 
  <span style="font-size: 100%;">Размер 100%</span> 
    Текуший размер: 16px = 1em
  <span style="font-size: 2em;">Размер 2em</span> 
  <span style="font-size: 200%;">Размер 200%</span>
  <span style="font-size: 30px;">Размер 30px</span>
  <span style="font-size: 2ex;">Размер 2ex</span>
</body>    
Размер 1em
Размер 100%
Текуший размер: 16px = 1em
(Размер 12pt - для ставнения)
Размер 2em
Размер 200%
Размер 30px
Размер 1.875em
Размер 2ex