SummArg | Cursos y recursos para webmasters

31/08/2011

Redimensionar el tamaño de fuente con jQuery

Tiempo atrás veíamos como sólo utilizando JavaScript podíamos generar botones para aumentar o disminuir el tamaño de la tipografía de una página. Existe un plugin para jQuery que logra lo mismo de un modo un poco mas completo, se trata de jFontSize. Es muy simple de implementar en cualquier sitio (incluidos los CMS) y por defecto añade botones de disminuir fuente, aumentar fuente y volver al estado por defecto.

Primero descargamos jQuery, jFontSize y los linkeamos a nuestro documento. Luego añadimos el HTML para los botones:

<a id="jfontsize-minus" href="#">A-</a>
<a id="jfontsize-default" href="#">A</a>
<a id="jfontsize-plus" href="#">A+</a>
<p class="some-class-name">This text will be resized</p>

Con el CSS añadimos unos bordes a cada botón para darles forma:

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;
}
.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;
}

y finalmente, antes de la etiqueta </body>, insertamos la llamada al script.

<script>
$('.some-class-name').jfontsize();
</script>

jFontSize

Dejar un comentario

  1. de dond descargamos el archivo jquery y el jfontsize

  2. Chechu

    jQuery lo tenés en jquery.com, y el j fontsize acá: http://www.jfontsize.com/. Saludos!

Dejar un comentario