Aumentar e diminuir fonte com jquery

Aumentar e diminuir fonte com jquery

Neste tutorial veremos como Aumentar e diminuir fonte com jquery.

Nesta seção, projetaremos uma estrutura básica no html. 

Usaremos A Tag <button>,<p> e a tag <i> para inserirmos os ícones de mais e menos.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

   <button class="btn-fonte" id="menor"> <i class="icon icon-minus"></i> </button> 
   <button class="btn-fonte" id="maior"> <i class="icon icon-plus-1"></i> </button>
                
    <p class="texto controla-fonte">
       Controle o texto com jquery
    </p>

    <p class="texto controla-fonte">
       Mais texto controlado por jquery
    </p>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a fonte e os botões mais e menos.

.texto { 

	width: 100%;
    float:left;
    padding:5px;
    font-size: 1em;
    margin-bottom: 10px;
    border-bottom: 1px #f4f4f4 solid; 
    
 }

.btn-fonte {
 
	border: none;
	background-color: #5be1e5;
	color: #fff;
	font-size: 1em;
	width: 30px;
	height: 30px;
	line-height: 35px;
	border-radius: 50px;
	cursor: pointer;

}

.btn-fonte:active { background-color: #4c4c4c; }

Vamos adicionar o Script para fazer o efeito de Aumentar e Diminuir.

<script>

    $(function() {

        $("button").click(function(){
        var tamanhoFonte = $(".controla-fonte").css("font-size");
        var tamanho = parseFloat(tamanhoFonte,10);
        var unidade = tamanhoFonte.slice(-2);

            if(this.id == "maior"){
           
                $(".controla-fonte").css("font-size", tamanho *1.4 +unidade );

            }

            if(this.id == "menor"){
           
                $(".controla-fonte").css("font-size", tamanho /1.4 +unidade );

            }

        })

    });

</script>

Combinando as Três seções acima Html, Css e jQuery temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando