Мой блог работает на 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 . Лично мне он помог.
Post Views: 401
Обратите внимание: это инструкция для неопытных пользователей
Подобно другим браузерам Chrome для Android обладает многими полезными опциями. Одна из них дает возможность увеличивать или уменьшать установленный по умолчанию размер шрифта на веб-страницах.
Конечно, чтобы увеличить размер шрифта, вы можете воспользоваться зумом или дважды нажать на +, одновременно удерживая клавишу CTRL. Но если вы всегда предпочитаете большой размер букв, почему бы не установить его сразу?
Чтобы поменять размер шрифта, установленный в Chrome для Android в первую очередь вам необходимо открыть данное приложение на вашем девайсе. Далее в открытом Chrome нажимаете на кнопку меню, которая находится в верхнем правом углу и жмете Настройки. В подменю Настроек вы увидите опцию Легкость просмотра. Нажав на нее, покажется бегунок, позволяющий легко поменять установленный в браузере размер шрифта, с мелкого (вы можете уменьшить до 50%) до крупного (увеличить до 200%). После установки желаемого кегля, вы можете вернуться к просмотру, и текст автоматически примет новый размер. Вы также можете нажать на масштабирование, которое весьма полезно на некоторых сайтах, где по каким-то причинам не происходит отклик на двойное нажатие на клавишу + или ее удержание при одновременном удерживании клавиши CTRL (но вы сможете регулировать размер шрифта, если включите эту опцию масштабирования)
1. Кнопка меню в Chrome всегда находится в верхнем правом углу. 2. Когда меню открыто, найдите Настройки. 3. В подменю Настроек мы увидим Специальные Возможности (Accessibility) 4. А теперь мы можем поиграть с размером текста… 5. … перетаскивая бегунок налево и уменьшая текст…Браузер построен на кодовой базе свободного проекта Chromium и отличается использованием логотипов Google, встроенной поддержкой Flash и PDF, наличием системы отправки уведомлений в случае краха, системой автоматической установки обновлений и передачей при поиске RLZ-параметров.
Основные изменения Google Chrome 37Кроме нововведений и исправления ошибок, в новой версии устранено 50 уязвимостей. Сочетанию двух уязвимостей (CVE-2014-3176, CVE-2014-3177) присвоен статус критической проблемы, позволяющей обойти все уровни защиты браузера и выполнить код в системе, за пределами sandbox-окружения. 25 уязвимостям присвоен высокий уровень опасности. В рамках программы по выплате денежного вознаграждения за обнаружение уязвимостей для текущего релиза компания Google выплатила 8 премий на сумму 43000 долларов США (одна премия 30000$, одна премия 4000$, три премии по 2000$, по одной премии в 1500$, 1000$ и 500$).
Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.
Рассмотрим пример из реальной жизни:
Показать код
window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px spnSpan1.style.color = "red"; alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!) }
Элемент
(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone 5 или Samsung Galaxy Note II).
Степень увеличения размера шрифта при font booting"е зависит от ширины элемента - чем шире элемент, тем сильнее его надо уменьшить, чтобы вписать в размеры экрана, и, соответственно, тем больше надо увеличить размер шрифта для компенсации этого уменьшения.
Проблемы font boosting Реализация font boosting в Google Chrome for Mobile имеет две особенности, которые могут привести к сложнообнаружимым ошибкам при web-разработке:Существуют 4 элемента, у первых трех из которых которых задано display: inline-block , а у 4-го - нет. В результате, у 4-го элемента размер увеличивается сразу после загрузки страницы, а у элементов 1–3 - только после изменения их цвета.
Показать код
Проблема с Font boosting в Google Chrome for Mobile window.onload = function () { /* Вновь созданные элементы */ var spnSpan1 = document.getElementById ("span-1"); var spnSpan2 = document.getElementById ("span-2"); var spnSpan3 = document.getElementById ("span-3"); var btnGo = document.getElementById ("btnGo"); /* Изменим цвет элементов, и их размер неожиданно увеличится */ btnGo.onclick = function () { spnSpan1.style.color = "red"; spnSpan2.style.color = "red"; spnSpan3.style.color = "red"; } }
Элемент 1
Элемент 2
Элемент 3
Элемент 4
Abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
Зная об этих особенностях, можно понять причину странного поведения Google Chrome for Mobile в Примере 1:
В результате, дальнейшее уменьшение масштаба страницы станет невозможным, и font boosting, призванный компенсировать это уменьшение, естественным образом не запустится.
Показать код
Решение№1 проблемы с Font boosting в Google Chrome for Mobile window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); /* В резальтате, font boosting не возникнет, и размер элемента при изменении его цвета не будет меняться. */ alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px spnSpan1.style.color = "red"; alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px }
Элемент
Abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
Показать код
Решение№2 проблемы с Font boosting в Google Chrome for Mobile window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); /* Провоцируем font boosting сразу после создания элемента. */ doReflow (); doFontBoosting (spnSpan1); /* В результате, в дальнейшем размер его шрифта уже не будет меняться. */ alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px spnSpan1.style.color = "red"; alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px } function doReflow () { document.body.offsetWidth; } function doFontBoosting (elElement) { var strColor = elElement.style.color; elElement.style.color = (strColor == "red" ? "blue" : "red"); elElement.style.color = strColor; }
Элемент
Abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc