Permitir a los usuarios cambiar el tamaño de fuente en una página web

Question

Me gustaría poder cambiar el tamaño del texto en una página web, supongo que se puede usar jQuery, pero no tengo experiencia en javascript.

Otro problema es que la página web es un archivo phtml y se utilizan varios comandos php echo. Y la página está compuesta de múltiples archivos phtml.

EDITAR: Me gustaría dar a los usuarios 3 opciones para diferentes tamaños de fuente.

Answer 1

El enfoque me gustaría tener es aplicar un porcentaje de tamaño de fuente de la etiqueta del cuerpo del HTML

body 
{ 
    font-size: 62.5%; 
} 

Entonces, para todos los demás elementos especifican font-size en EMS, que genera el tamaño que un escalado hasta porcentaje de la fuente de tamaño heredado

h1 
{ 
    font-size: 1.8em; 
} 

p 
{ 
    font-size: 1.2em; 
} 

utilizo 62,5% en el cuerpo, ya que es fácil de traducir esto a tamaños de pixel cuando se especifica otra tamaños de fuente por ejemplo, 1.2em = 12px, 1.8em = 18px y así sucesivamente

Para cambiar el tamaño de la fuente en la página programáticamente solo necesita cambiar el valor del tamaño de la fuente en el cuerpo y el resto de la página se ampliará o hacia abajo en consecuencia

usted puede probar esto por tener tres divs

<div id="sizeUp">bigger text</div> 
<div id="normal">normal text</div> 
<div id="sizeDown">smaller text</div> 

En jQuery creo que se puede hacer

$(document).ready(function() { 

    $("#sizeUp").click(function() { 

     $("body").css("font-size","70%"); 

    }); 

    $("#normal").click(function() { 

     $("body").css("font-size","62.5%"); 

    }) 

    $("#sizeDown").click(function() { 

     $("body").css("font-size","55%"); 

    }) 
}); 

Answer 2

la forma más fácil de cambiar el tamaño del texto es w ith css. Si tiene acceso al archivo CSS, puede cambiar el tamaño de todo el texto en la página con esto:

* { 
    font-size: 110%; 
    } 

añadirlo a la parte superior de su archivo styles.css, que afecta a todo el texto en la página, y todo el texto que usa el archivo styles.css.

Answer 3

Prueba esto:

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p> 

Answer 4

Sólo cambiar el tamaño de la fuente haciendo CTRL + y Ctrl-- (en Firefox, podría ser diferente en otros navegadores)

Answer 5

Cómo aumentar y reducir el tamaño de la fuente de div contenido a través de jquery?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<div class="data"> 

sghfhj jhkjik jhbjbjbh 
</div> 

<div ><input type="button" value="increase" class="increaseFont"></input></div> 
<div><input type="button" value="decrease" class="decreaseFont"></input></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".increaseFont,.decreaseFont").click(function(){ 
    var type= $(this).val(); 
    var curFontSize = $('.data').css('font-size'); 
    alert(curFontSize); 
    if(type=='increase'){ 
    $('.data').css('font-size', parseInt(curFontSize)+1); 
    } 
    else{ 
    $('.data').css('font-size', parseInt(curFontSize)-1); 
    } 
    alert($('.data').css('font-size')); 

    }); 


}); 
</script> 

esto está funcionando :)

Answer 6

Basta con jQuery y HTML puede agregar una opción para aumentar/disminuir el tamaño de la fuente del texto. Debe envolver el contenido en un div con la clase kickblogger y segmentar ese div para cambiar su tamaño de fuente mediante jQuery. Usa este script

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script> 

Con estos botones.

<input type="button" id="btnkickplus" value="A +" /> 
<input type="button" id="btnkickminus" value="A -" /> 

• Demo - http://jsfiddle.net/3N4Lf/
• artículo - http://www.howtokickblogger.com/2013/09/change-text-font-size-on-blogger-using-jquery.html

:)

Answer 7

utilizo este, con la fuente impresionante:

Fontsize: 
<div class="fa fa-search-plus" id="sizeUp"></div> 
<div class="fa fa-search" id="normal"></div> 
<div class="fa fa-search-minus" id="sizeDown"></div> 

y el guión:

<script async type="text/javascript"> 
    $(document).ready(function() { 
     $("#sizeUp").click(function(){ 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)+1); 
     }); 

     $("#normal").click(function() { 
      $(".ccm-page").css("font-size","15px"); 

     }) 

     $("#sizeDown").click(function() { 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)-1); 
     }) 
    }); 
    </script>