Cambiar el tamaño de letra dinámicamente

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Para hacerlo de forma incremental, debemos crearnos un elemento HTML con un id, para poder acceder a él y cambiarle los estilos directamente.

<p class="texto" id="contenido">...</p>

En el estilo creado deberemos indicar el tamaño de la letra usando porcentaje o medidas de tamaño de fuente (em), sobre todo por comodidad, en este caso usaremos porcentaje.

p.texto {
font-size: 100%;
}

El código necesario para modificar el estilo sería algo así:

function tamano(mas) {
var signo = (mas)? 1 : -1; // Para sumar o restar el porcentaje
// Obtenemos el objeto que contiene el texto
var obj=document.getElementById("contenido");
// Obtenemos el tamaño de letra y lo modificamos
var fontsize = obj.style.fontSize;
fontsize = parseInt(fontsize.replace(/%/g, ''));
fontsize += signo*10;
if (fontsize > 0 && fontsize < 0) {
obj.style.fontSize = fontsize+"%";
}
}

La otra forma de cambiar el tamaño de letra es teniendo tres hojas de estilo, una para cada tipo de letra (normal, pequeña y grande), y usar una de las distintas hojas de estilos según se desee. Esta solución es la mejor para cuando tenemos distintos tipos de letra y tamaños en toda la página web.

El método que vamos a usar es el que se explica aquí, y el cual vamos a explicar. Como ya hemos dicho tenemos tres hojas de estilos:

<link rel="stylesheet" title="normal" href="normal.css" type="text/css" />
<link rel="alternate stylesheet" title="pequena" href="pequena.css" type="text/css" />
<link rel="alternate stylesheet" title="grande" href="grande.css" type="text/css" />

También necesitaremos una función javascript que habilite la seleccionada y deshabilite la actual.

function activarCSS(title) {
// Obtengo los elementos link
var links = document.getElementsByTagName("link");
// Los recorro todos y el que tenga
// el title que queremos lo activamos
// el resto los desactivamos
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute("title") == title) {
links[i].disabled = false;
} else {
links[i].disabled = true;
}
}
}

Por último nos tendremos que crear tres botones para modificar el tamaño de la letra, usando la función activarCSS, con parámetros “normal”, “pequena”, “grande”.

Más información

• Botones para cambiar el tamaño de letra
• ¿Por qué deben ser accesibles los sitios web?
• Accesibility & Font Size
• Alternative Style: Working With Alternate Style Sheets
• Stuff and Nonsense: Strategies for CSS Switching
• PHP Style Switcher
• Developing sites for users with Cognitive disabilities and learning difficulties
• Relative Font Sizes as Part of Compliance with Accessibility Guidelines
• Changing font sizes with the various browsers.
• Text-size switching with PHP and CSS