Главная 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 пунктам)
px Пиксель
(размер шрифта браузера; по умолчанию = 16px)

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом.
Самой распространенной единицей является пункт (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>
<span style="font-size: 12px;">Это размер 12 пикселей (Для сравнения)</span>
<span style="font-size: 14.7px;">Размер 14.7px;</span>
<span>Размер текста не указан</span>
Размер 0.25 дюйма
Размер 5 миллиметров
Размер 1 Пика
Размер 12 пункта
Это размер 12 пикселей (Для сравнения)
Размер 14.7px
Размер текста не указан (16 пикселей - по умолчанию)

 

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

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

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

В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 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: 1.875em;">Размер 1.875em</span>
  <span style="font-size: 2ex;">Размер 2ex</span>
</body>
Результат
Размер 1em
Размер 100%
Текуший размер: 16px = 1em
(Размер 12pt - для ставнения)
Размер 2em (2*16px=32px)
Размер 200%
Размер 1.875em
Размер 2ex

Вьюпорт (Viewport)

Вьюпорт (Viewport) - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.

Meta-тег viewport ипользуется для сайтов с адаптивным дизайном.

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

<meta name="viewport" content="width=device-width, initial-scale=1">

width – ширина области просмотра.
Значением атрибута является целое неотрицательное число от 200 до 10000 пикселей
или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана (ширина устройства).
initial-scale – начальный масштаб страницы. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Относительные единицы измерения: vw, vh, vmin, vmax - задают размеры относительно окна браузера (вьюпорта).

vw - относительно ширины вьюпорта.
vh - относительно высоты вьюпорта.
vmin - относительно наименьшего значения из vw или vh.
vmax - относительно наибольшего значенияmax из vw или vh.

3 (Относительные единицы измерения vw, vh, vmin, vmax) 
<div>обычный текст
  <div style="font-size: 1.5vw;">
    Привет Мир (1.5vw)
      <div style="font-size: 1.5vmax;">Изменяемый размер ширине (1.5vmax)
        <div style="font-size: 2.5vmin;">Изменяемый размер по высоте (2.5vmin)</div>
        <div style="font-size: 2.1vh;">Изменяемый размер по высоте явно (2.1vh)</div>
      </div>
  </div>
</div>
Результат
обычный текст
Привет Мир (1.5vw)
Изменяемый размер ширине (1.5vmax)
Изменяемый размер по высоте (2.5vmin)
Изменяемый размер по высоте экрана явно (2.1vh)