Небольшой JavaScript-скрипт позволяет посетителям сайта самостоятельно изменять размер текста с помощью двух кнопок A+ и A−. Это удобно для пользователей, которым стандартный размер шрифта кажется слишком маленьким или, наоборот, слишком большим.

Как работает скрипт
При нажатии на кнопку A+ размер текста увеличивается на 10%, а кнопка A− уменьшает его на 10%.

Для изменения используется свойство font-size у элемента <html>. Благодаря этому изменение масштаба применяется ко всей странице и корректно работает с размерами, заданными через относительные единицы rem и em.Сохранение выбранного размера.

Главное преимущество скрипта —
выбранный размер сохраняется в браузере с помощью localStorage.
Например, если посетитель увеличил текст до 120%, а затем перезагрузил страницу или перешёл в другой раздел сайта, выбранный размер останется прежним.
localStorage.setItem('fontSize',size);

При следующем открытии страницы скрипт получает сохранённое значение:
localStorage.getItem('fontSize')
Если пользователь ещё ни разу не изменял размер текста, устанавливается стандартное значение 100%.

Ограничение размера
Чтобы пользователь случайно не сделал текст слишком маленьким или огромным,

установлены ограничения:

  • минимальный размер — 80%;
  • стандартный — 100%;
  • максимальный — 140%.


Эта строка отвечает за ограничение:
size=Math.max(80,Math.min(140,size));
Таким образом, кнопка A+ увеличивает размер до 140%, а A− уменьшает его максимум до 80%.

Установка на сайт

Скрипт состоит из двух кнопок, небольшого CSS и JavaScript-кода. Его можно разместить в нужном месте шаблона сайта, например в шапке, меню или панели дополнительных настроек.

Код
<button type="button" id="fontPlus">A+</ button>  
  <button type="button" id="fontMinus">A-</button>  

  <style>  
  html{font-size:100%}  
  </style>  

  <script>  
  $(function(){  
let size=+localStorage.getItem('fontSize')||100;  

function setFont(){  
size=Math.max(80,Math.min(140,size));  
$('html').css('font-size',size+'%');  
localStorage.setItem('fontSize',size);  
}  

$('#fontPlus').click(function(e){  
e.preventDefault();  
size+=10;  
setFont();  
});  

$('#fontMinus').click(function(e){  
e.preventDefault();  
size-=10;  
setFont();  
});  

setFont();  
  });  
  </script>


Для работы JavaScript-части требуется подключённая библиотека jQuery, поскольку скрипт использует конструкцию $().
В результате посетитель получает простой и удобный инструмент для настройки размера текста под себя, а выбранная настройка автоматически сохраняется между посещениями страниц сайта.