Пожалуйста, объясните эту структуру размеров шрифта

Question

CSS крупного сайта, на который я смотрю, имеет странный способ управления размерами шрифтов в CSS. Во-первых, селектор тела имеет это:

body {
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif;
}

Затем, чтобы получить нестандартный размер шрифта h2, который они делают:

h2 {
font-size:3em;
}

Если вы измените директивы шрифта в любом из этих мест, размер шрифта h2 изменится и будет выглядеть неправильно. Таким образом, они четко управляют размером шрифта с помощью этих директив, и я хочу знать, почему они так поступили бы ...

Вопросы:

1. Почему шрифт h2 не просто перекрывает основной шрифт? Это похоже на основной шрифт, который действует как множитель на его размер ....

2. Какова мотивация для этого дизайна?

Спасибо, Ионы

Answer 1

1em соответствует размеру шрифта по умолчанию.Размер текста по умолчанию в браузерах составляет 16 пикселей.Если вы не измените значение по умолчанию, то есть.

Здесь значение по умолчанию определяется как 62,5% от значения по умолчанию в браузере с высотой строки 1,5.

3em в 3 раза больше установленного размера по умолчанию.

Так что когдавы изменяете тело по умолчанию, оно влияет на каждое место, где используется единица измерения размера, включая тег h2, в 3 раза превышающий значение по умолчанию.

Answer 2

Почему шрифт h2 не просто перекрывает основной шрифт?Как будто основной шрифт действует как множитель его размера ....

Поскольку в CSS em является относительной единицей измерения.Таким образом, 3 ems 62,5% от базового размера означают 187,5% базового размера для <h2> элементов.

Какова мотивация для этого дизайна?

Настройкапроцентное значение для элемента body означает, что -% также является относительной единицей измерения - пользователь может изменить размер текста на всей странице, используя настройки размера текста в своем браузере.Я предполагаю, что значение типа 62,5% соответствует случаю, когда размер шрифта браузера по умолчанию делает всю копию тела слишком большой (помните, что это применяется к элементу body).Мой сайт использует 90%, что не так уж и мало, но вы поняли.

Answer 3

Обычно браузер определяет размер шрифта по умолчанию 16 пикселей.однако, это относительная единица.Так, например, если у вас задан размер шрифта для контейнера / div

1 em   = 1 times 16px = 16px
1.5 em = 1.5 times 16px = 24px
2 em   = 2 times 16px = 32px

Поэтому, установив его на 62,5%, он уменьшит ваш базовый размер шрифта до 10 пикселей по умолчанию.

, что означает, что этот метод облегчает визуализацию размеров шрифта в пикселях,

1 em = 10px
1.5em = 15px
2em = 20px