Мой блог работает на WordPress. Недавно я столкнулся с одной неприятной проблемой. При переходе на любую из страниц блога шрифт увеличивался до непристойных размеров, что не только не радовало глаз, но и делало страницу плохо читаемой. Неприятность эта случалась только при использовании браузера Chrome – другие браузеры отображали блог вполне корректно. Причем после обновления страницы при помощи клавиши f5 шрифт становился нормальных размеров. Так же помогало масштабирование страницы – зажатая клавиша Ctrl и вращение колесом мыши.
Проблема есть и ее нужно решать. Сначала я подумал о проблеме неправильного восприятия браузером Chrome масштаба отображения страницы, но внимательно присмотревшись к изображениям, я понял, что масштаб не причем – размер всех изображений оставался прежним. Загвоздка была именно в размере шрифта. Долгие исследования русскоязычного сегмента интернета и пара десятков просмотренных статей не помогли исправить положение. Зато я обзавелся новым симпатичным шрифтом от Google, поддерживающим кириллицу, и отмел предположение, что виноват плохо совместимый с «великим и могучим» шрифт. Так что время было потрачено не совсем зря. Я даже почувствовал себя избранным, т.к. во время поисков не нашел жалоб на подобные баги в Chrome.
Далее я начал исследовать англоязычные сайты и очень быстро понял, что моя проблема далеко не уникальна и порождает море дискуссий. Но даже несмотря на это, вопрос об исправлении размера шрифта оставался открытым. Меня в корне не устраивали поползновения на целостность кода в «style.css», «header.php», «functions.php» и прочих файлах темы. Да и положительного результата такие изменения чаще всего не давали.
Пара просмотренных сайтов, несколько горячих дискуссий и я у цели!!! Интересно? Еще бы!
Причина
Причина проблемы отображения увеличенного шрифта в Chrome для моего блога на WordPress стала – мы слышим барабанную дробь – «rem».
Дело в том, что создатели WordPress-тем в последнее время начали активно использовать масштабируемую единицу для определения размера текста. Имя этой единице rem. Именно в ней крылась причина неправильного масштабирования шрифта. Хотя я уверен, что корень настигшего меня несчастья лежит гораздо глубже – где-то во взаимодействии WordPress, Chrome и некоторых WP-тем. Но копаться в глубинных причинах произошедшего, у меня не было ни времени, ни желания.
Решение
Чтобы исправить ошибку масштабирования шрифта при открытии сайта в Chrome, нужно заменить «rem» на «em» в теге «body», который прописан в файле «style.css» вашей WordPress-темы.
Заходим в административную панель WordPress и следуем по следующему пути:
Внешний вид -> Редактор -> Таблица стилей (style.css)
Находим тег body и в параметре font-size заменяем единицы измерения величины шрифта с rem на em.
У меня этот кусок до изменения выглядел вот так:
После изменения он выглядит вот так:
Вот и все – размер шрифта перестал плясать. Побочных явлений после такой правки кода я пока не наблюдал. Надеюсь, они не появятся.
Я не гарантирую работоспособность данного метода для всех тем WordPress. Лично мне он помог.