¿Cuál es una buena manera de lidiar con el cambio de tamaño de fuente en un sitio web

Question

Tengo que poner algunos iconos para el tamaño de fuente y el tamaño de fuente en un sitio web. Ha pasado un tiempo desde que hice esto y no sabía cuál era el puntaje en estos días. Es JQuery el método preferido para tratar esto o CSS puro. Además, ¿tengo que hacer algo especial con los tamaños de letra, es decir, usar em en lugar de px?

Gracias de antemano.

Answer 1

Me gustaría ir, al configurar todas las unidades en em s.Entonces, es una simple cuestión de escalar todo ello a la vez utilizando un javascript sencilla, así:

$(function() { 
     var fontSize = 1.1; 
     $("#larger").click( 
      function() { 
       console.log("click"); 
       fontSize += .1; 
       $("body").css("font-size", fontSize + "em"); 
      } 
     ); 

     $("#smaller").click( 
      function() { 
       console.log("click"); 
       fontSize -= .1; 
       $("body").css("font-size", fontSize + "em"); 
      } 
     ); 
    }); 

Answer 2

Puede hacerlo de varias formas.

Lo que preferiría es cambiar las hojas de estilo en cada clic hacia arriba o hacia abajo. Puede usar jQuery o simplemente el viejo código JavaScript para lograrlo.

En este caso, si usa em o px no hace diferencia, siempre y cuando el tamaño aumente o disminuya en valor en cada hoja de estilo.

Alternativamente, podría usar JavaScript para simplemente alterar el tamaño del texto en un elemento específico. Nuevamente, las unidades realmente no importan. Solo está modificando el valor (por ejemplo, 12px a 14px o 1em a 1.5em)

Answer 3

Si utiliza porcentajes como tamaños de fuente en su CSS, puede simplemente establecer el tamaño de fuente una vez en su elemento BODY y cambiar ese valor dinámicamente Todo lo demás se convertirá en un porcentaje de eso.

Answer 4

CSS debería funcionar bien. Use em porque el cliente aún puede establecer tamaños de fuente para que le gusten. Por ejemplo, si tienen tamaños de fuente que comienzan en 14 px, em 2 lo configuran en 28 px.

Si configura tamaños de fuente en px, se configura para clientes enojados que no tienen control sobre el tamaño de fuente en el navegador de su elección.

Answer 5

Usaría pure css (aunque usaría jQuery/js para modificar el tamaño de letra BASE en vivo) es mejor usar ems aunque puede ser realmente frustrante como la cascada de ems. (más sobre esto más adelante)

Necesita un tamaño de fuente básico establecido en píxeles en la parte superior del área de tamaño ajustable (12px es el estándar) y todo lo demás debe estar en ems.

ahora por la parte frustrante: tenga en cuenta que si tiene un div con tamaño de fuente: 0.9: em; y un párrafo anidado con tamaño de letra 0.8em el párrafo será más pequeño de lo esperado ya que su base será el div con tamaño de fuente: 0.9em.

una vez que trabaje en todo esto, aunque todo lo que necesita hacer es cambiar el tamaño de fuente básico en píxeles.

Answer 6

Normalmente, utilizo el elemento 62.5% en el cuerpo (por lo que 1em == 10px), y luego defino todos los tamaños de fuente en el sitio en ems. Para la escala de fuentes, hago una de dos cosas:

1. hacer un cambio de CSS jQuery en la principal div contenedor y establezca un porcentaje de tamaño de fuente. Esto cambiará todo el texto en el sitio de manera similar.

2. Realice un cambio de clase jQuery en el cuerpo para indicar el nuevo tamaño de fuente. Luego puede tener reglas de CSS para escalar diferentes partes de la página de diferentes maneras (solo escalar un poco la navegación, copiar el cuerpo más, etc.).