Размер шрифта в CSS слишком мал, процентное соотношение между размерами не работает

Question

Я пытаюсь изменить размер шрифта в зависимости от браузера (используя Javascript и CSS). Получили код, который обнаружит браузер, и теперь Firefox обнаружен. Я пытаюсь установить размер шрифта следующим образом:

document.getElementById("parag1").style.fontSize = "80%";

, но размер шрифта абзаца отображается слишком маленьким. Браузер переходит с обычного размера текста на слишком маленький, без постепенного уменьшения размера. На самом деле, даже установка размера шрифта с помощью встроенного CSS (style="font-size:90%;") дает мне слишком малый размер отрисовки.

скачок отрисовки размера шрифта присутствует как в Opera, так и в Firefox.

Это не то, что показанона странице размера шрифта (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)

что мне делать?

Answer 1

Поэтому я попытался сделать семейство шрифтов одинаковым (Arial), а затем сделать оба шрифта одинакового размера (например, 100%). Похоже, что оба браузера отображают текст одинаково, так как они занимают одинаковое пространство (поэтому мне не нужно обнаружение браузера для этого).

Похоже, что с изменением размера текста теперь все в порядке, не знаю, является ли это вышеупомянутым исправлением, или я просто не видел разницы ранее (действительно, похоже, это был большой скачок).

Answer 2

Попробуйте уменьшить размер шрифта с меньшим уменьшением не на 10% за раз.

Допустим, вы начинаете с размера шрифта 40 (px, em, vw что-нибудь), а затем уменьшаете его до 90%,каков новый размер шрифта 40 * 90% = 36,

снова, когда есть больше контента, вы уменьшаете его до 80%, так что теперь фактический размер шрифта составляет 40 * 80% = 32

Это причина, по которой вы видите большие различия в размерах шрифтов.

Итак, решение, 1 - 5% и посмотрите, что дает вам лучшие результаты.