Anderson Mendes

Diminuir e aumentar fontes é uma funcionalidade tradicional na web desde que o javascript existe. O uso é fácil, rápido e útil para seus usuários.

Script

Para usar é muito simples, crie um arquivo .js (opcional) ou adicione o código dentro de um arquivo global de todos os seus scripts (recomendado). Dentro deste novo arquivo, cole o código abaixo:

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }
}

Desta forma está sendo determinado que o tamanho padrão da fonte é de 12px, o tamanho mínimo será de 8px e o máximo de 18px. Altere os valores de acordo com sua necessidade.

Como usar

Para usar o script você precisará primeiro fazer a referência ao arquivo dentro da sua página, veja o exemplo abaixo:

<script type="text/javascript" src="/scripts/tamanhodafonte.js"></script>

Depois insira os links que permitirão ao usuário a ação de diminuir ou aumentar a fonte do texto:

<a href="javascript:decreaseFontSize();" title="Diminuir Fonte">Diminuir Fonte</a>

<a href="javascript:increaseFontSize();" title="Aumentar Fonte">Aumentar Fonte</a>