Aumentar el tamaño de la fuente con jQuery

por .

controlar size font jQueryUna buena idea para mejorar la usabilidad de nuestros proyectos es la de incorporar la opción de aumentar o disminuir el tamaño de las fuentes, logrando facilitar la lectura a nuestros visitantes.

Para lograr esto podemos utilizar distintas herramientas, gracias al plugin jQuery jFontSize podemos obtener esta funcionalidad con apenas unas lineas de código, muy simples y que no requieren modificar en lo absoluto el código HTML de nuestro documento.

Para instalar este plugin jQuery tendremos que agregar a nuestras hojas de estilo:

CSS: Configuración de estilo de las opciones

.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;
}

XHTML: Enlaces necesarios para controlar el tamaño y texto de ejemplo.

<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>

jQuery: Inicialización del plugin.

$('.some-class-name').jfontsize();

Pueden ver una demostración online desde la web oficial del plugin.

Web: jFontSize

Categorizado en: