Исправление ошибки отображения масштаба шрифта в Chrome при использовании некоторых тем WordPress. Font boosting в мобильных браузерах Что такое font boosting

Мой блог работает на 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

Браузер построен на кодовой базе свободного проекта Chromium и отличается использованием логотипов Google, встроенной поддержкой Flash и PDF, наличием системы отправки уведомлений в случае краха, системой автоматической установки обновлений и передачей при поиске RLZ-параметров.

Основные изменения Google Chrome 37

• Поддержка экранов высокого разрешения (hiDPI);
• Поддержка технологии DirectWrite для ускорения и увеличение качества отрисовки шрифтов на платформах Windows 7 и Windows 8. До этого вывод осуществлялся через подсистему GDI (Graphics Device Interface), что создавало проблемы при работе на экранах очень высокого разрешения (по сути изображение формировалось с разрешением 1600x900 с последующим масштабированием до реального разрешения экрана);
• Поддержка субпиксельного масштабирования шрифтов, позволяющего реализовать плавную анимацию при изменении размера шрифта;
• Добавление систем электронных таблиц и презентаций Google (Google Slides and Sheets) в число web-приложений, предлагаемых по умолчанию на страннице программ и в Chrome Apps launcher;
• Изменено оформление менеджера паролей;
• Поддержка нового HTML-тега "dialog", позволяющего формировать диалоговые окна и управлять ими через JavaScript API (пример);
• Координаты TouchEvent теперь представлены числом с типом double (ранее long), что позволяет обеспечить высокочувствительное отслеживание прикосновений к сенсорному high-DPI экрану;
• Включение по умолчанию Web Cryptography JavaScript API, который предназначен для выполнения базовых криптографических операций на стороне web-приложений, таких как манипуляции с криптографическими хэшами, генерация и проверка цифровых подписей, кодирование и декодирования данных с использованием различных методов шифрования, формирование криптографически надёжных случайных чисел. В API также предусмотрены функции для генерации ключей и управления ими. В качестве примеров применения Web Cryptography API называется обеспечение аутентификации, использование цифровых подписей, сохранение целостности данных, реализация шифрованных коммуникаций, отличных от SSL/TLS;
• От префикса -webkit- избавлены параметры CSS-свойства cursor - "zoom-in" и "zoom-out";
• Добавлен объект navigator.hardwareConcurrency для получения данных о числе ядер CPU;
• Выбранный пользователем язык теперь доступен через объект navigator.languages. При изменении языка генерируется событие languagechange;
• С Courier New на Consolas изменён предлагаемый по умолчанию на платформе Windows моноширинный шрифт;
• Добавлен модуль CSS Shapes, позволяющий организовать обтекание не прямоугольных границ текстом;
• Переход на предпоследнюю фазу прекращения поддержки плагинов NPAPI, при которой требуется изменение настроек для включения NPAPI на платформах Windows и OS X (активация через клик теперь не работает). Полное удаление кода поддержки NPAPI для Windows и OS X ожидается в конце года (в версии для Linux поддержка NPAPI уже прекращена);
• Большое число изменений под капотом, направленных на оптимизацию производительности и увеличение стабильности;
• В версии Chrome 37 для платформы Android представлен упрощённый процесс присоединения к аккаунту Google: если осуществлён вход в аккаунт Chrome, то вход в аккаунты web-сервисов Google (Gmail, Maps и т.п.) отныне будет производиться автоматически;
• Обновлено оформление интерфейса Chrome для платформы Android, который приведён в соответствие концепции Material Design;
• В Chrome для мобильных платформ добавлена поддержка архитектур MIPS, X86-64 и ARM64 в версии для Android, и ARM64 в версии для iOS.

Кроме нововведений и исправления ошибок, в новой версии устранено 50 уязвимостей. Сочетанию двух уязвимостей (CVE-2014-3176, CVE-2014-3177) присвоен статус критической проблемы, позволяющей обойти все уровни защиты браузера и выполнить код в системе, за пределами sandbox-окружения. 25 уязвимостям присвоен высокий уровень опасности. В рамках программы по выплате денежного вознаграждения за обнаружение уязвимостей для текущего релиза компания Google выплатила 8 премий на сумму 43000 долларов США (одна премия 30000$, одна премия 4000$, три премии по 2000$, по одной премии в 1500$, 1000$ и 500$).

Компания Google постоянно совершенствует мобильный браузер Google Chrome для Android, внося в него полезные возможности. Многие пользователи не знают о тех или иных функциях, которые сделают серфинг в сети более простым, быстрым и удобным.

Важно : некоторые возможности могут быть недоступны на отдельных смартфонах из-за устаревшего Chrome (рекомендуем обновить его через Google Play) или версии ОС.

1. Упрощенный поиск со страницы

Часто бывает, что в ходе поиска необходимой информации в интернете вы заходите на сайт, где есть именно то, что вам нужно, но в тексте используются непонятные термины или просто есть вещи, с которыми вы ранее не сталкивались. Обычно пользователь открывает новую вкладку, вбивает в строку поиска неизвестное слово, ищет его, затем возвращается к основному материалу. Но этот процесс можно сделать значительно проще и быстрее.

Прямо в тексте выселяем незнакомое слово/фразу, как внизу появляется панель с поиском по Google. Вытягиваем ее повыше, видим поисковую выдачу. Смело идем по ссылке, а по клику на «Назад» возвращаемся на ту страницу, с которой мы и начинали.

2. Принудительное изменение масштаба

Многие сайты не дают воспользоваться функцией приближения. Кто-то делает это сознательно, некоторые ресурсы ограничены собственным движком. Какими бы ни были причины, Chrome позволяет обойти этот запрет. Идем в «Настройки», «Специальные возможности», отмечаем пункт «Принудительно изменять масштаб».

На некоторых сайтах даже с активной настройкой запрет обойти не получится. Яркий пример – мобильная версия «Яндекса».

3. Зуммирование одной рукой

Большинство пользователей, когда хотят увеличить какой-то объект на странице, прикладывают два пальца на экран, а затем разводят их в разные стороны. Так можно делать только при использовании двух рук, причем размер дисплея не играет роли. Но есть и альтернатива, которую в особенности оценят пользователи больших смартфонов.

Для увеличения достаточно сделать одно касание экрана, оторвать палец и быстро вернуть его обратно, а потом водить по экрану вверх-вниз. Вторая рука не нужна! Не забываем и про умную подстройку контента под размер дисплея по двойному касанию – эффективно, когда слева и справа лезут малоинформативные блоки, а текст расположен строго по центру.

Такой способ приближения/отдаления является системным, а значит работающим и в некоторых других программах, например, Google Maps

4. Быстрое переключение между вкладками

Пользователи мобильных браузеров постоянно сталкиваются с теми же проблемами, что и в настольных клиентах – с кучей открытых вкладок. И если на компьютере и планшете отображаются бирки сайтов, на смартфонах приходится использовать кнопку «Вкладки». Но в Chrome можно обойтись и без этого, достаточно провести слева-направо или справа-налево по полю ввода адреса или поискового запроса для переключения на соседние вкладки!

Если вам надо переместиться сильно дальше, чем на одну-две вкладки, то все равно можно не нажимать на отдельную кнопку – просто проведите вниз по поисковой строке, чтобы перейти в меню открытых вкладок. А если провести по одной из вкладок справа-налево, то получится закрыть ее сразу же, но тут уже время не сэкономишь, так как на каждой из них есть небольшой крестик для выполнения того же действия.

5. Закрыть все вкладки

Часто такое бывает, что в порыве веб-серфинга в браузере оказываются открытыми десятки вкладок. Если вы уверены, что там нет ничего важного, их можно закрыть все разом. Для этого переходим любым из удобных способов к списку открытых сайтов, жмем три точки, кликаем по пункту «Закрыть все вкладки».

6. Быстрая навигация по меню

Свайпы в Chrome используются практически повсеместно. Например, не нужно нажимать на три точки, чтобы попасть в меню, достаточно положить на них палец и провести вниз. Хотя на первый взгляд этот жест кажется малополезным, когда вы привыкаете к расположению пунктов в этом меню, получается переключаться на отдельные функции вообще не задумываясь. Так, к примеру, эффективно переходить на «настольную» версию сайта.

7. Полезности меню

Некоторые особенности браузера лежат на поверхности, но мы о них не вспоминаем, когда те становятся нужными. В частности, меню предлагает такие возможности как «Найти на странице» (поиск конкретного текста на просматриваемом сайте), «Недавние вкладки» (последние просмотренные, но уже закрытые сайты) и «Добавить на главный экран» – последняя создает ссылку на выбранную страницу прямо на рабочем столе.

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

8. Экономия трафика

В настройках есть и функция «Экономия трафика», которая сжимает контент перед загрузкой на смартфон. Тем самым сайты загружаются быстрее, а объем затраченного трафика снижается. Обратите внимание, что эта функция не работает с сайтами, адреса которых начинаются с https. При типичном использовании интернета экономия колеблется в пределах 20-40% трафика в зависимости от посещаемых ресурсов.

9. Гуру

Google ведет несколько веток развития браузера Chrome, если вам хочется пробовать свежие возможности раньше других, то стоит перейти на Beta-версию . Хотя эта ветка работает стабильно, не забывайте, что Google не гарантирует такое же качество работы, как и в случае массовой версией браузера.

Вне зависимости от выбранной версии, пользователь может получить доступ к некоторым возможностям, которые отключены по умолчанию. Для этого в поисковой строке вводим:

Открывается страница с длинным перечнем экспериментальных возможностей, если вы выбрали Chrome Beta, то в этом списке переключателей будет больше. Следует учитывать, что тут некоторые функции работают совсем плохо, а потому после их активации сразу проверьте работоспособность в нескольких местах, чтобы браузер не «упал» в самый неподходящий момент позже.

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

10. Сохранить страницу

Google Chrome позволяет сохранить страницу в виде PDF-документа на смартфон, что позволит не только получить доступ к контенту без подключения к интернету, но и зафиксировать текущее состояние страницы (мало ли, зачем это вам может пригодиться). Для этого с меню выберите «Печать», а потом кликните «Сохранить как PDF». Готово.

Бонус

Еще одной фишкой Chrome является встроенный файловый менеджер. Чтобы получить к нему доступ, введите в адресной строке:

Менеджер нельзя назвать сверхудобным или крайне функциональным, но его наличие, опять-таки, позволит большинству пользователей не устанавливать отдельную программу для удовлетворения базовых потребностей. Вспомните 7-й пункт, этот файловый менеджер тоже можно вынести на рабочий стол!

Конечно, в Сhrome есть и такие возможности, как синхронизация вкладок с другими устройствами, где используется этот браузер, режим «Инкогнито» и другие. Считаете, что мы несправедливо обделили вниманием какую-то функцию? Напишите о ней в комментариях!

Разработка мобильных приложений

Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.

Рассмотрим пример из реальной жизни:

Пример 1:

Имеется вновь созданный элемент с display: inline-block .

Измерим его ширину через свойство offsetWidth .

Поменяем его цвет.

И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!

Показать код

window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px spnSpan1.style.color = "red"; alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!) }

Элемент

Смотреть пример on-line .

(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone 5 или Samsung Galaxy Note II).

Почему же изменение цвета элемента приводит к увеличению его размера ?! Причиной этого странного поведения, как раз, и является font boosting. Что такое font boosting Font boosting - это специальный прием, с помощью которого мобильные браузеры подгоняют размер шрифта под разрешение мобильного устройства. Этот прием нужен из-за того, что многие web-страницы, сверстанные в расчете на десктопные браузеры, содержат текстовые элементы, ширина которых превышает ширину мобильного экрана. Для просмотра этих элементов посетитель вынужден либо использовать горизонтальную прокрутку, либо вписать элемент в размеры экрана, уменьшив масштаб страницы. Однако, при уменьшении масштаба уменьшается также и размер шрифта, делая текст порой совершенно нечитаемым. Так вот, font boosting специально увеличивает размер шрифта, так, чтобы после вписывания блока в ширину экрана, этот размер шрифта соответствовал изначально задуманному.

Степень увеличения размера шрифта при font booting"е зависит от ширины элемента - чем шире элемент, тем сильнее его надо уменьшить, чтобы вписать в размеры экрана, и, соответственно, тем больше надо увеличить размер шрифта для компенсации этого уменьшения.

Проблемы font boosting Реализация font boosting в Google Chrome for Mobile имеет две особенности, которые могут привести к сложнообнаружимым ошибкам при web-разработке:

Font boosting элемента происходит не сразу после его создания, а после ближайшей «перерисовки» (reflow) страницы. В свою очередь, reflow, как известно, происходит после загрузки страницы, после завершения модифицирующего страницу скрипта, а также при обращении к свойствам, завязанным на геометрию страницы, например offsetWidth .

Font boosting элемента с display: inline-block происходит не просто после reflow страницы, а после reflow и изменения какого-нибудь свойства самого элемента (например цвета).

Проиллюстрируем эту особенность на примере:Пример 2:

Существуют 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

Смотреть пример on-line .

Зная об этих особенностях, можно понять причину странного поведения Google Chrome for Mobile в Примере 1:

Когда мы измеряем offsetWidth вновь созданного элемента, мы получаем значение до font boosting.

В то же время, это измерение активирует reflow страницы.

Наконец, изменение цвета элемента запускает у него font boosting, и размер шрифта увеличивается. А вместе с увеличением размера шрифта увеличивается и offsetWidth , становясь заметно больше измеренного двумя строчками выше.

Что делать? Существует два способа предотвратить подобные скачки размера шрифта:Способ 1 - отменить font boosting. Для этого надо установить ширину web-страницы (а, точнее, ширину ее вьюпорта) равной ширине экрана, добавив тег:

В результате, дальнейшее уменьшение масштаба страницы станет невозможным, и font boosting, призванный компенсировать это уменьшение, естественным образом не запустится.

Пример 3

Показать код

Решение№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

Смотреть пример on-line .

Однако, данный способ не всегда применим, особенно если мы разрабатываем javascript-библиотеку и не имеем полного контроля над конечной страницей.Способ 2 - принудительно спровоцировать font boosting сразу после создания элемента. Для этого надо:

Вызвать reflow страницы. Для вызова reflow можно, например, измерить document.body.offsetWidth .

Если элемент имеет display: inline-block , то, также, изменить его цвет, а затем вернуть обратно.

В результате, к тому моменту, когда мы начнем проводить с элементом какие-то содержательные действия, скачок размера шрифта у него уже состоится и не будет нам мешать.Пример 4

Показать код

Решение№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

inline-block

reflow

Добавить метки