Веб-сайт показывает другой размер шрифта, даже если он был установлен глобально

Question

У меня есть два сайта, на которых установлен шрифт

* {
    font-family: "Varela Round", sans-serif;
}

Поскольку font-size не указано, браузер использует его стандартные значения для каждого элемента. Но если я установлю размер на 0.9em, то размер действительно маленький. Вывод window.getComputedStyle(element).fontSize также показывает различные значения px. Если я установлю font-size: 13px, то размер везде одинаков.

Answer 1

Но если я установлю размер 0.9em, размер будет действительно маленьким.

Да, это относительный размер.

body становится 90% размера шрифта html.

A sectionвнутри body становится 90% body (таким образом, 81% html).

A p внутри section становится 90% section (т. е. 72,9% от html)

и т. д.

Если я установлю размер шрифта: 13 пикселей, размер везде одинаков.

Абсолютные единицы измерения не зависят от размера шрифта родительского элемента.

Answer 2

Это объяснение обобщено с сайта Размер шрифта Css

Причина этого в том, что px не относится к другим элементам.% и em вместо этого относятся к их родителю, что приводит к следующему эффекту: Поскольку 100% = 1em две единицы могут почти (см. % против em )использоваться аналогично.

Одним из решений является использование rem, которое действует подобно em, но не присваивает значение от родителя.Другой способ - установить размер по умолчанию для основного элемента, например body, а затем установить размер шрифта относительно родительского для всех элементов.