CSS — буквы отображаются смехотворно огромными (или маленькими) при использовании «em» для указания размера шрифта

Я испытываю довольно странное поведение из-за моих правил размера шрифта CSS. Я, вероятно, сам делаю что-то глупое [это должно быть так ;-) ], но я надеюсь, что кто-то может указать мне на это.

В настоящее время (в целях тестирования) у меня есть только одно правило для размера шрифта в таблице стилей, которое регулирует ВСЕ размеры шрифта, и это оно:

p, div, a, span {
               font-size:3em;
               }

Теперь я знаю, что 3em — это довольно большой размер шрифта (насколько я знаю, он должен соответствовать ширине около 3 * 16 = 48 пикселей в браузерах с большим экраном), но то, что вы видите в реальности, просто смешно. Взгляни:

http://www.svvreewijkdevaan.nl/nl/

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

И на самом деле, заглянув в инструмент проверки Firefox, я обнаружил, что вычисленные буквы «3em» имеют размер шрифта (получите это) 34992 пикселей, то есть почти 35 тысяч. Что это хотя бы значит?

На самом деле реальный (отображаемый) размер шрифта (то есть ширина), кажется, увеличивается, по крайней мере, экспоненциально с указанным числом em, а не пропорционально. Так, например, если я заменю 3em на 3,5em, отображаемый размер шрифта станет как минимум в два раза шире (на самом деле больше). И наоборот, если я уменьшу указанный размер шрифта до 1em, я получу нормальный и ожидаемый размер около 16 пикселей. Но если я сделаю его 0,7em, ширина уменьшится, может быть, до 2px (абсолютно нечитаемо мало).

Отсюда мой вопрос: почему реальные (отображаемые) размеры шрифта не увеличиваются пропорционально размеру шрифта (в терминах «em»), указанному в моей таблице стилей?

Заранее спасибо.


css font-size em
person Holland    schedule 19.01.2016    source источник
comment
em основан на размере шрифта элемента parent. Теперь, если вы вкладываете элементы, для которых вы установили размер шрифта в em друг в друга, эти значения умножаются. Либо не вкладывать элемент с размерами шрифта, установленными в em, так сильно; установите его для меньшего количества элементов (например, только для div или p, и пусть потомки наследуют размер); или вместо этого загляните в блок rem.   -  person CBroe    schedule 19.01.2016
comment
Ты сделал это! Замена em на rem сразу решила проблему. Если вы превратите свой комментарий в ответ, я приму его. И я буду серьезно и глубоко думать о том, что вы сказали о вложенности элементов и необходимости родительского размера шрифта (при использовании em). Спасибо!   -  person Holland    schedule 19.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

  • Либо не вкладывать элемент с размерами шрифта, установленными в em, так сильно;
  • установите его для меньшего количества элементов (например, только для div или p, и пусть потомки наследуют размер);
  • или вместо этого загляните в блок rem.
person CBroe    schedule 19.01.2016