Размер шрифта Chrome большой, а затем уменьшает

Question

Я использую em-единицы в CSS нашего сайта. Когда я загружаю страницу сайта в Chrome, весь текст будет загружаться с очень большим размером шрифта. Если я изменил размер окна браузера или загрузил консоль разработчика, размер шрифта вернется обратно к «правильному» размеру. Иногда, если я просматриваю страницы на сайте, он будет делать то же самое или ведет себя беспорядочно (начиная с большого, иногда начинающегося с нормального размера).

Я не могу воспроизвести это в Safari или Firefox, поэтому подумайте, что это должно быть проблемой в том, как интерпретирует мои CSS или мои em-модули.

Любые идеи о том, почему это происходит? Если я удалю все единицы em и использую px, тогда он отлично работает (что, возможно, является решением, но не помогает мне понять их).

(Использование: Chrome 32, Macbook Air, OS 10.8.5, пользовательская тема Wordpress).

Некоторые CSS:

body { 
    margin: 0 auto; 
    color: #404040; 
    font-family: sans-serif; 
    font-size: 1.6rem; 
    line-height: 1.5; 
    padding: 1em; } 

(если я использую font-size:16px здесь он будет работать хорошо, но тогда в чем смысл em/rem)

Answer 1

нуждается больше информации. Был бы оценен живой URL.

Не удается воспроизвести, используя только этот код:

body { 
    margin: 0 auto; 
    color: #404040; 
    font-family: sans-serif; 
    font-size: 1.6rem; 
    line-height: 1.5; 
    padding: 1em; } 

http://jsfiddle.net/wZD4n/

Answer 2

CSS3 вводит несколько новых единиц, в том числе блок бэр, который стоит для "корневой эм".

Элемент em относится к размеру шрифта родителя, что вызывает проблему с добавлением . Модуль rem относится к элементу root- или html. Это означает, что мы можем определить один размер шрифта в элементе html и определить все единицы rem в процентах от этого.

Вы можете попробовать font-size: 1.6em; /* EM not REM */, но в любом случае он может не работать, если 1em равен текущему размеру шрифта.

Вы можете использовать px вместо или установить px в теле и использовать em после.

Answer 3

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

В моем CSS, я изначально был сбросить шрифт с помощью этого:

html { font-size: 62.5%; }

Вы, наверное, уже знаете, почему, но это просто означает, что 1em будет равен 10px. Тогда у меня было font-size: 1.4rem в теле, чтобы установить размер базового шрифта до 14px.

Чтобы исправить эту проблему, вы упомянули: настройка

Try ваш HTML размер шрифта в 10px , а не процентное значение, а затем использовать бэр с тех пор. Кажется, все работает для меня.