Размер шрифта CSS: установите его для *, так как размер шрифта кратен rem, а размер шрифта тела умножается вдвое. ⇐ CSS

[Anonymous]

Смотрите консольный вывод фрагмента кода ниже. В этом примере я использую множитель 0,5, потому что он упрощает умножение и показывает, что можно как вдвое уменьшить размер шрифта, так и увеличить его вдвое.

Я установил размер шрифта на 0,5rem, используя универсальный селектор *. Никаких других настроек. Размер шрифта documentElement составляет 8 пикселей, как и следовало ожидать, если по умолчанию для 1rem установлено значение 16 пикселей (8 = 16 x 0,5). Но размер шрифта основного текста составляет 4 пикселя, то есть 16 x 0,5 x 0,5. Почему это происходит?

Я понимаю, что селектор * не всегда является хорошей практикой, и если я использую селектор html, оба значения здесь правильно установлены на 8 пикселей; но на моей реальной странице размер шрифта не наследуется для всех элементов. Я открыт для предложений по передовому опыту.

Я проверил это в Chrome и Firefox в Windows и получил те же результаты.

РЕДАКТИРОВАТЬ: я только что обнаружил, что с помощью комбинированного селектора html * я могу добиться желаемого результата: глобальной настройки без двойного множителя.

console.log("doc: " + getComputedStyle(document.documentElement).fontSize); console.log("body: " + getComputedStyle(document.body).fontSize); * { font-size: 0.5rem;