Font-size в CSS

"Font-size". "Font-size в CSS"

Разберём свойство font-size в CSS подробно — со всеми вариантами значений и примерами.

Font-size в CSS

1. Что такое font-size в CSS/синтаксис/примеры.
2. Доступные значения font-size в CSS.
3. Единицы измерения font-size в CSS.

1. Что такое font-size в CSS/синтаксис/примеры.

Начнем наш разбор "font-size в CSS" с простого :

Как переводится font-size в CSS.

Слово "font-size" - состоит из двух слов:

"font" - с английского "шрифт".

"size" - с английского "размер".

Итого вы получили :

font-size в CSS - размер шрифта в CSS

Синтаксис font-size в CSS.

selector {

font-size: value;

}

selector -> селекторы

2. Доступные значения font-size в CSS.

1. Абсолютные размеры (ключевые слова)

Задают фиксированный размер, зависящий от настроек браузера:

xx-small (очень маленький);

x-small (экстра‑маленький);

small (маленький);

medium (средний, значение по умолчанию);

large (большой);

x-large (экстра‑большой);

xx-large (очень большой).

Пример font-size в CSS.

h1 { font-size: x-large; }

p { font-size: medium; }

2. Относительные размеры (ключевые слова) font-size в CSS.

Изменяют размер относительно родительского элемента:

larger — больше, чем у родителя;

smaller — меньше, чем у родителя.

Пример font-size в CSS.

css

.child {

font-size: larger; /* на один шаг больше, чем у родителя */

}

3. Единицы измерения font-size в CSS.

   Пиксели (px) font-size в CSS.

   Фиксированный размер. Самый предсказуемый вариант.

   p { font-size: 16px; }

   Проценты (%) font-size в CSS.

   Относительно размера шрифта родительского элемента. 100% = размер родителя.

   body { font-size: 14px; }

   .child { font-size: 150%; } /* 14px * 1.5 = 21px */

   em font-size в CSS.

   Относительно размера шрифта текущего элемента или родителя. 1em = текущий размер.

   div { font-size: 18px; }

   span { font-size: 1.2em; } /* 18px * 1.2 = 21.6px */

   rem font-size в CSS.

   Относительно размера шрифта корневого элемента (). 1rem = размер шрифта .

   html { font-size: 16px; }

   h1 { font-size: 2rem; } /* 32px */

   p { font-size: 1rem; } /* 16px */

   Пункты (pt) font-size в CSS.

   Традиционная типографская единица. 1pt = 1/72 дюйма.

   p { font-size: 12pt; }

   Другие единицы

   cm (сантиметры);

   Ещё : font-size в CSS.

   mm (миллиметры);

   in (дюймы);

   ex (высота символа «x» текущего шрифта, используется редко).

   Специальные значения font-size в CSS.

   inherit — наследует значение от родителя;

   initial — устанавливает значение по умолчанию (medium);

   unset — сбрасывает значение.

Всего комментариев : Comments+ 2.0

+ =