Как получить текущий размер шрифта для элемента с помощью CSS

Question

Мне нужно рассчитать размер шрифта с помощью CSS (CurrenSize + px). например:

body * {font-size: calc([CurrenSize] + 3px) !important;}

Я делаю это в jQuery, но не слаженно, поэтому я спрашиваю, могу ли я сделать это в CSS. в CSS (этот код работает, но 100% делают текст очень маленьким, поэтому мне нужен текущий размер шрифта):

body * {font-size: calc(100% + 3px) !important;}

в js

 $("body *").css('font-size','+=3');

Answer 1

Я понимаю, что вы хотите увеличить размер шрифта на 3 пикселя по всей странице.Вы сможете сделать это в css, только если вы определите размер шрифта с помощью em, а не px.Таким образом, шрифт реалистичен по отношению к родителю, и вы можете легко их изменять.

Так что теперь у вас есть возможность изменить все значения размера шрифта, которые я предполагаю. Или просто измените свой CSS, чтобы использовать переменные для размера шрифта https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Answer 2

Если ваш элемент не имеет свойства font-size, ваш код jQuery может работать некорректно. Потому что ваш элемент может наследовать свойство font-size от родительских элементов. Попробуйте это:

let element = document.getElementById("element"));
let computedFontSize = window.getComputedStyle(element).fontSize;

и теперь вы можете сделать это:

element.style.fontSize = computedFontSize+=3;

Answer 3

«Текущий» размер шрифта равен 1em… так что вы, вероятно, хотите calc(1em + 3px)

(или, может быть, 1rem, в зависимости от того, хотите ли вы, чтобы это было несколько для вложенных дочерних элементов, или нет.)